Vue 组件循环 简单应用及使用要点

目录

一、问题

二、实现方式

三、总结

---

 

一、问题

1.有一个列表，列表里面还嵌套了子元素，子元素的结构和父元素的DOM结构相似

2.有可能多次循环

 

二、实现方式

1.思路： 直接循环引用当前组件

2. 为了区分不同层次的标签，希望能够给不同层次的标签添加 不同的样式。

        1）如何区分不同循环层次的DOM呢？

         level: 每循环一次加一,就可以记录 循环的深度。 可以自己设置不同深度的样式

        2）如何从外部传递 样式，并且把第 n 层级的labelClass传递给 第n+1 层级呢？

        labelClass标志第n层级的样式, 在循环中使用 props传参方式传递. 所有的层级都可以 通过 item.labelClass取到 对应的样式

3. 数据结构 

 [{name: '数据类型',value: '订单信息',labelClass: 'text-blue-500',children: [{name: '订单ID',value: '123',},{name: '商家名称',value: 'test',labelClass: 'text-yellow-500',children: [{name: '商家门店',value: '门店1,门店2,门店3',},],},{name: '药店名称',value: 'test药店',},],},]

4.具体代码

<template><div v-for="item in listData" :key="item.name" class="mb-6px flex text-[14px] text-1a1a1a"><span class="w-70px shrink-0 text-808080" :class="[labelClass || '']">{{ item.name }}</span><template v-if="item.children"><div class="grid"><List :key="item.name" :list-data="item.children" :level="level + 1" :label-class="item.labelClass || ''"></List></div></template><template v-else><text-ellipsis rows="2" class="grow text-1a1a1a" expand-text="展开" collapse-text="收起" :content="item.value" /></template></div>
</template>
<script setup lang="ts">
import { TextEllipsis } from 'vant'
import List from './List.vue'
import { ref } from 'vue'
interface ListDataItem {name: stringvalue?: stringlabelClass?: stringchildren?: ListDataItem[]
}
defineProps<{ listData: ListDataItem[]; labelClass?: string }>()const level = ref(1)
</script>

5. 最终效果

三、总结

1. 组件循环的用途：DOM结构呈现递归嵌套结构(需要多个v-for嵌套渲染，但是每次渲染的dom都差不多),可以方便的实现渲染，不需要多次使用v-for重复嵌套渲染

2.组件循环的要点：

        1)确定循环的条件：此处为children属性是否存在，保证循环可以正常终止

        2)循环组件区分不同循环层级：props传参，循环时修改参数以便知道不同的层级

3.其实没有什么特别的，和正常的父子组件使用差不多，只不过现在父子组件都是同一个而已，传参和接参写在一起

 

/*

希望对你有帮助！

如有错误,欢迎指正,谢谢！

*/