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

最新推荐文章于 2025-07-24 08:22:30 发布

原创最新推荐文章于 2025-07-24 08:22:30 发布 · 1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

Vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在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>