Vue自定义组件多重v-for循环
只是作为个人记录用。数据结构:list: [{author: Mike, content: 'Mike content', subitem: [1, 2, 3]},{author: Jack, content: 'Jack content', subitem: [4, 5, 6]},]方式1:直接将子组件写入父组件(其实理论上只有...
·
只是作为个人记录用。
数据结构:
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>
更多推荐
已为社区贡献1条内容
所有评论(0)