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>