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

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

例如：假设我正在构建一个“手风琴”元素。手风琴由“标题”和“内容”部分组成。通过单击标题，可以在视图中切换内容。这样的元素的最终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>

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

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

<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>

不幸的是，它不起作用。我已经阅读了几次官方文档，在“组件”部分，当它谈到

元素时，似乎表明我们应该能够做到这一点-但我一生都不知道如何。。。文档实际上提到了一个具有如下结构的元素：

<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>

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

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

<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>

……但它并没有给出简单、具体的例子来说明如何做到这一点

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

那么

和

也应该是Vue组件吗

那么它应该是这样的：

<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>

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

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

<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>

因此：

• 元素的内容进入
  的模板

---

• 整个
  模板进入
  模板内的
  ，谢谢您的建议。关于这个问题，在for Vue中有一个很长的讨论。您的变通方法是可用的，但打破了标题和内容元素的模块化，并产生了不必要的复杂和复杂的html（如问题跟踪程序中的讨论所述），这并不理想。希望通过讨论可以解决这个问题，这样在Vue中构建更复杂的嵌套元素就更容易了。