vue3使用递归组件渲染层级结构

先看看是不是你想要的:

当有层级去渲染的时候,嵌套的层级不明确,这时只能通过递归组件去渲染。

数据如下:

通过判断subCatalog这个字段的长度是否大于0来确定是否有下级。

上代码:(代码是使用uniapp开发的,view标签可进行更换)

复制代码
父组件
<template>
    <view>
        <my-tree
            v-for="(item, index) in list"
            :key="index"
            :item="item"
            :open="openFirst[index]"
            @toggleOpen="toggleOpenFirst(index)"
        />
    </view>
</template>

<script setup>
import myTree from './components/myTree.vue';
import { ref, watch } from 'vue';

const props = defineProps({
    list: { // 展示的层级数据
        type: Array,
        default: []
    }
})

const openFirst = ref([]); // 控制第一级的展开状态

watch(() => props.list, (val) => {
    if (val.length > 0) {
        openFirst.value = new Array(val.length).fill(false);
    }
})


const toggleOpenFirst = (index) => {
    openFirst.value[index] = !openFirst.value[index]; // 切换第一级的展开状态
};

子组件:
<template>
  <view class="link">
      <view class="linkbg">
          <view class="links">
// 1、item是父组件传递过来的数据
              <view class="links-title" @click="goList(item)">{{ item.name }}</view>
              <uv-icon :class="isOpen ? 'arrow-down' : 'arrow-right'" name="arrow-down" v-if="item.subCatalog.length" @click="toggleOpen(item)"></uv-icon>
          </view>
          <Transition>
              <view v-if="isOpen">
                  <view v-for="(subItem, index) in item.subCatalog" :key="subItem.id">
// 调用自身,1处的item便是subItem了
                      <my-tree
                          :item="subItem"
                          :open="openTwo[index]"
                          @toggleOpen="toggleSubOpen(index)"
                      />
                  </view>
              </view>
          </Transition>
      </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  item: {
      type: Object,
      required: true,
  },
  open: {
      type: Boolean,
      default: false,
  },
});

const emit = defineEmits(['toggleOpen']);

const isOpen = ref(props.open); // 根据 props.open 初始化
const openTwo = ref(new Array(props.item.subCatalog.length).fill(false)); // 初始化子项的展开状态

const goList = (val) => {
}

const toggleOpen = (val) => {
  isOpen.value = !isOpen.value; // 切换当前项的展开状态
  emit('toggleOpen', props.item); // 触发事件
};

const toggleSubOpen = (index) => {
  openTwo.value[index] = !openTwo.value[index]; // 切换子项的展开状态
};

</script>

递归组件的思想,便是和使用递归方法一样,自身去调用自身,以达到遍历每一项的数据。

相关推荐
诗书画唱3 分钟前
【前端面试题】JavaScript 核心知识点解析(第二十二题到第六十一题)
开发语言·前端·javascript
excel10 分钟前
前端必备:从能力检测到 UA-CH,浏览器客户端检测的完整指南
前端
前端小巷子17 分钟前
Vue 3全面提速剖析
前端·vue.js·面试
悟空聊架构23 分钟前
我的网站被攻击了,被干掉了 120G 流量,还在持续攻击中...
java·前端·架构
CodeSheep25 分钟前
国内 IT 公司时薪排行榜。
前端·后端·程序员
尖椒土豆sss29 分钟前
踩坑vue项目中使用 iframe 嵌套子系统无法登录,不报错问题!
前端·vue.js
遗悲风29 分钟前
html二次作业
前端·html
江城开朗的豌豆33 分钟前
React输入框优化:如何精准获取用户输入完成后的最终值?
前端·javascript·全栈
CF14年老兵33 分钟前
从卡顿到飞驰:我是如何用WebAssembly引爆React性能的
前端·react.js·trae
画月的亮36 分钟前
前端处理导出PDF。Vue导出pdf
前端·vue.js·pdf