Vue自定义组件多重v-for循环

只是作为个人记录用。

---

数据结构：

list: [
          {author: Mike, content: 'Mike content', subitem: [1, 2, 3]},
          {author: Jack, content: 'Jack content', subitem: [4, 5, 6]},
    ]

---

方式1：直接将子组件写入父组件（其实理论上只有一个组件）

上面是子组件

    Vue.component('listitemnum', {
        props: ['num'],
        template: `<div>->{{num}}<-</div>`
    });
    Vue.component('listitem', {
        props: ['content1', 'no'],
        template: `<div>{{no}}:{{content1}}
        <listitemnum v-for="(n,nindex) in content1.subitem" :num="n" :key="nindex"></listitemnum>
        </div>`
    });

HTML代码： 

从外观上看，其实只有一个组件在循环

    <listitem v-for="(listitem,listindex) in list" :key="listindex"
              :content1="listitem" :no="listindex">
    </listitem>

---

 

方式2：使用<slot>插槽，官方文档在slot部分讲解不是很清楚，只有这么一句话：

如果 <navigation-link> 没有包含一个 <slot> 元素，则任何传入它的内容都会被抛弃。

 上面为子组件，在父组件内部为子组件留有一个slot

    Vue.component('listitemnum2', {
        props: ['num'],
        template: `<div>->{{num}}<-</div>`
    });
    Vue.component('listitem2', {
        props: ['content1', 'no'],
        template: `<div>{{no}}:{{content1}}
        <slot></slot>
        </div>`
    });

HTML代码：

    <listitem2 v-for="(listitem,listindex) in list" :key="listindex"
              :content1="listitem" :no="listindex">
        <listitemnum2 v-for="(n,nindex) in listitem.subitem" :num="n" :key="nindex"></listitemnum2>
    </listitem2>