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: string
  value?: string
  labelClass?: string
  children?: 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.其实没有什么特别的，和正常的父子组件使用差不多，只不过现在父子组件都是同一个而已，传参和接参写在一起

/*

希望对你有帮助！

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

*/