使用渲染功能时如何在 Vue.js 模板中定义插槽？答案

【问题标题】：How to define a slot in a Vue.js template when using render function?使用渲染功能时如何在 Vue.js 模板中定义插槽？
【发布时间】：2019-10-26 20:37:03
【问题描述】：

当使用常规的旧 HTML 在 Vue.js 组件模板中定义插槽时，就像这样简单：

<div>
    <h1>Hello, I am a template!</h1>
    <slot name="my_slot"></slot>
</div>

在你的页面中使用模板时可以像这样激活它：

<my-template>
    <template slot="my_slot">
        <p>Slot content.</p>
    </template>
</my-template>

应该输出如下内容：

<div>
    <h1>Hello, I am a template!</h1>
    <p>Slot content.</p>
</div>

但是，我的情况要求我使用 render 函数定义我的组件模板，这意味着模板 DOM 需要使用对 createElement 函数的嵌套调用来设置。所以我原来的模板定义现在看起来像这样：

h('div', {}, [
    h('h1', {
        domProps:{
            innerHTML: "Hello, I am a template!"
        }
    }, []),
    h('slot', {
        attrs:{
            name: "my_slot"
        }
    }, [])
])

但是这对我不起作用。我假设这是因为 'slot' 不是有效的 html 标签，但我似乎找不到关于这个特定主题的任何明确答案。使用 render 函数时，如何在 Vue.js 组件模板中正确定义槽？

【问题讨论】：

标签： javascript html vue.js vue-component

【解决方案1】：

来自documentation

h('div', {}, [
    h('h1', {
        domProps:{
            innerHTML: "Hello, I am a template!"
        }
    }, []),
    this.$slots.my_slot
])

【讨论】：

我试过了，但一直收到：TypeError: this.$slots.my_slot is not a function
哦，对了，只有作用域插槽才是函数。正确答案
啊，成功了！但实际上我认为我实际上需要使用作用域插槽。我用了这个：this.$scopedSlots.header_buttons({ props: this.props })，它奏效了。感谢您的帮助:)

【解决方案2】：

h('div', {}, [
    h('h1', {
        domProps:{
            innerHTML: "Hello, I am a template!"
        }
    }, []),
    h('div', {
        slot: 'my_slot'
    }, [])
])

它有效。

【讨论】：

你提出的改变是什么？