Vue.js 中真正的嵌套组件？

Question

是否可以使用 Vue.js 创建语义嵌套的元素？

示例：假设我正在构建一个 'accordion' 元素。 Accordions 由 'heading' 和 'content' 部分组成。通过单击标题可以将内容切换进出视图。像这样的元素的最终 html 是这样的：

<div class="accordion">
    <div class="heading">
        My Accordion
    </div>
    <div class="content">
        Accordions are fun! Loren ipsum dolor sit amet.
        This can be extensive text, include pictures, etc.
    </div>
</div>

我希望能够使用这样的语法在我的 html 中创建这样的元素：

<accordion>
    <heading>My Accordion</heading>
    <content>
        Accordions are fun! Loren ipsum dolor sit amet.
        This can be extensive text, include pictures, etc.
    </content>
</accordion>

'heading' 和 'content' 元素不是通用的，应该只存在于父 'accordion' 元素的上下文中，所以我认为它们应该在父组件的定义中声明 .

我知道为了捕获一个元素的innerHTML内容，我们必须使用<slot>元素，所以我尝试使用以下模板：

<template id="heading">
    <div class="heading">
        <slot></slot>
    </div>
</template>

<template id="content">
    <div class="content">
        <slot></slot>
    </div>
</template>

<template id="accordion">
    <div class="accordion">
        <heading></heading>
        <content></content>
    </div>
</template>

<div id="app">

    <accordion>
        <heading>My Accordion</heading>
        <content>
           Accordions are fun. Lorem ipsum dolor sit amet.
           I could add a lot more text here, or other elements.
        </content>
     </accordion>

</div>

还有 Vue javascript...：

Vue.component('accordion', {
    template: '#accordion',
    components: {
        heading: {
            template: '#heading'
        },
        content: [
            template: '#content'
        }
    }
});

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

不幸的是，它不起作用。我已经多次阅读官方文档，并且在 'Components' 部分中，当它谈到 <slot> 元素时，似乎表明我们应该能够做到这一点 - 但我一生都无法弄清楚如何......文档实际上提到了一个具有这样结构的元素：

<app>
    <app-header></app-header>
    <app-footer></app-footer>
</app>

...但它没有给出如何做的简单、具体的例子。

信息从父元素传递到子元素的方式令人困惑，我一直无法在网上找到任何教程来展示如何设置这样的嵌套元素。任何指导将不胜感激。

Answer 1

所以<heading> 和<content> 也应该是 Vue 组件？

那么它应该是这样的：

<div id="app">
  <h5>Accordion test</h5>
  <accordion>
    <heading slot="heading">Heading Text</heading>
    <content slot="content">Content Text</content>
  </accordion>

<template id="accordion">
  <div class="header">
    <slot name="heading"></slot>
  </div>
  <div class="content">
    <slot name="content"></slot>
  </div>
</template>

<template id="heading">
  <div class="template-heading">
    <slot></slot>
  </div>
</template>

<template id="content">
  <div class="template-content">
    <slot></slot>
  </div>
</template>
</div>

和 JS：

var Heading = Vue.extend({
  template: '#heading'
})
var Content = Vue.extend({
  template: '#content'
})
var Accordion = Vue.extend({
  template: '#accordion',
  components: {
    heading: Heading,
    content: Content
  }
})
Vue.component('heading', Heading)
Vue.component('content', Content)
Vue.component('accordion', Accordion)

var App = new Vue({
  el: '#app',
  data() {
    return {
        test: 'Test'
    }
  }
})

所以：

• <heading> 元素的内容进入 <heading> 的模板。
• 而<heading>的整个模板进入<slot name="heading">inside <accordion>的模板

工作小提琴：https://jsfiddle.net/Linusborg/ud9a614o/