[Vue.JS] Как отобразить структуру (передать данные потомкам)?

Question

[Tenebrius]

Есть подобная структура:

var VM = new Vue({
    el: '#app',
    data: {
      arr: [ // массив
        {
          id: "1",
          title: "title1",
          styleclass: "class1",
          tags: [ // вложенный массив
            {
              id: "11",
              title: "title11",
              elements: [ // еще более вложенный массив
                {
                  id: "111",
                  "title": "title111"
                },
                {
                  id: "112",
                  "title": "title112"
                }
              ]
            },
            {
              id: "12",
              title: "title12"
            }
          ]
        }, 
        {
          id: "2",
          title: "title2",
          styleclass: "class2",
          tags: [
            
          ]
        }
      ]
    }
  });

...которая должна трансформироваться в нечто такое:

<div id='app'>
  <div class='someclass class1'> <!-- массив -->
    <h1>title1</h1>    
    <div class='anotherclass'> <!-- вложенный массив -->
      <h2>title111</h2>      
      <div class='someclass class1'> <!-- еще более вложенный массив -->
        <h3>title111</h3>
        
      </div>      
      <div class='someclass class1'>
        <h3>title112</h3>
        
      </div>
    </div>   
    <div class='anotherclass'>
      <h2>title112</h2>
      
    </div>
  </div>
  <div class='someclass class2'>
    <h1>title2</h1>
  
  </div>
</div>

Как организовать компоненты?

P.S. В приложении должен быть только один экземпляр класса VUE? или зависит от задач?

Answer 1

[Evgeny Kulakov]

А в чем проблема, создавайте компоненты)

<div id='app'>
<arr-comp v-for="arrItem in arr" >
  <h1>{{arrItem.title}}</h1>
  <tag-comp v-for="tagItem in arrItem.tags">
     <h2>{{tagItem.title}}</h1>
     <element-comp v-for="elementItem in tagItem.elements">
        <h3>{{elementItem.title}}</h3>
     </element-comp>
  </tag-comp>
</arr-comp>
</div>

Шаблон каждого компонента должен иметь примерно следующий вид:

<template>
<div>
<slot></slot>
</div>
</template>

ps. Экземпляров может быть сколько угодно

Comments

[Tenebrius]

Спасибо!
А если необходимо чтобы вместо слота был фиксированный компонент?

[Evgeny Kulakov]

Tenebrius: Не совсем понял вопрос, слот - это по сути указание куда должен вставляться контент. посмотрите доку на vue.