Vuejs Slot亲子

Question

如何让这两个组件协同工作？

Vue.component('parent', {
    template: ''+
        '<slot name="foo"></slot>'+
    ''
});

Vue.component('child', {
    template: ''+
        '<div slot="foo">bar</div>'+
    ''
});

我以为我可以做这样的事情，但似乎不起作用

Vue.component('parent', {
    components: [
        'child'
    ],
    template: ''+
        '<slot name="foo"></slot>'+
    ''
});

这是一个JS小提琴https://jsfiddle.net/3fjmLL52/

Answer 1

如果您希望在父级中呈现子级，则模板将如下所示：

<div id="app">
    <main>
        <parent>
          <child slot="foo"></child>
        </parent>
    </main>
</div>

您也可以从子模板中删除slot="foo"。

Vue.component('child', {
    template: `<div>bar</div>`
});

Vue.component('parent', {
    template: `
    <div>
      <slot name="foo">Default</slot>
      <h1><slot name="bar">Header</slot>
 	  </div>`
});

Vue.component('child', {
    template: '' +
        '<div>bar</div>' +
	''
});

new Vue({
    el: '#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
    <main>
        <parent>
          <child slot="foo"></child>
          <span slot="bar">Header Content</span>
        </parent>
    </main>
</div>