Истинно вложенные компоненты в Vue.js?

Question

Можно ли создавать семантически вложенные элементы с помощью Vue.js?

Пример: допустим, что я строю элемент 'accordion'. Аккордеоны состоят из 'рубрика' и '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> 

«заголовок» и «контент» не являются общими и должны существовать только в контексте родительского элемента «аккордеон», поэтому я считаю, что они должны быть объявлены в пределах определения родительского компонента.

Я знаю, что для того, чтобы захватить содержание 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> 

И на JavaScript Vue ...:

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

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

К сожалению, это не работает. Я читал официальную документацию несколько раз, а в разделе «Компоненты», когда речь идет о элементах <slot>, кажется, что мы должны должен быть в состоянии сделать это - но я не могу на жизнь мне работать, как ... на самом деле документы упоминают элемент со структурой, как это:

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

... но это не дает простые, конкретные примеры того, как это сделать.

Способ передачи информации от родительского элемента к дочернему элементу запутан, и я не смог найти какие-либо учебники в Интернете, которые показывают, как настроить вложенный элемент, подобный этому. Любое руководство будет высоко оценено.

Answer 1

поэтомуи <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"> внутри шаблона <accordion>

Работа скрипки: https://jsfiddle.net/Linusborg/ud9a614o/