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>

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

相关推荐
Justinc.3 分钟前
CSS3新增边框属性(五)
前端·css·css3
fruge10 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia19 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫20 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
十一吖i37 分钟前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年39 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_40 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891142 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾43 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking44 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js