使用渲染函数时如何在 Vue.js 模板中定义插槽？

Question

使用常规旧 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 函数定义组件模板，这意味着需要使用对 createElement 函数的嵌套调用来设置模板 DOM。所以我原来的模板定义现在看起来像这样：

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

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

Answer 1

从文档中

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