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

本文介绍了在Vue.js中实现列表组件的两种方法:直接嵌套和使用插槽。通过具体示例展示了如何传递属性和使用v-for循环来展示列表项及其子项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

只是作为个人记录用。


数据结构:

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>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值