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

从documentation

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

Answer 2

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

它有效。

使用渲染功能时如何在Vue.js模板中定义广告位？

2 个答案: