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

Posted 2023-02-23

【中文标题】使用渲染功能时如何在 Vue.js 模板中定义插槽？

【英文标题】：How to define a slot in a Vue.js template when using render function?

【发布时间】：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 组件模板中正确定义槽？

【参考方案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'
    , [])
])

它有效。

【讨论】：

你提出的改变是什么？