Vue组件递归——组件化开发的必备技能！

最新推荐文章于 2024-03-18 08:21:05 发布

前端阿飞V

最新推荐文章于 2024-03-18 08:21:05 发布

阅读量367

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_55357295/article/details/128104079

版权

本文介绍了如何使用Vue组件递归来处理树形结构数据，如组织架构图、文件夹目录和导航菜单。通过组件自身递归渲染数据，实现了动态展开收起的功能，并提供了完整代码示例。

摘要由CSDN通过智能技术生成

不知道大家有没遇到过这样的场景：渲染列表数据的时候，列表的子项还是列表。如果层级少尚且可以用几个for循环搞定，但是层级多或者层级不确定就有点无从下手了。

其实这就是树形结构数据，像常见的组织架构图，文件夹目录，导航菜单等都属于这种结构。很多组件库都带有树形组件，但往往样式不是我们想要的，改起来也非常的费劲。那么，如何自己渲染这些数据呢？答案就是——组件递归！

效果展示

以上就是使用组件递归，并加入简单交互的展示效果。点击节点会在控制台输出节点对应的数据，如果有子节点，则会展开或收起子节点。接下来我们就看看如何实现以上效果吧！

渲染完整数据

渲染数据这一步非常简单，首先是把树形结构封装成一个列表组件，其次判断每一项有没有子节点，如果有子节点，再使用自身组件去渲染就可以了。

src/components/myTree.vue

<template>
  <div class="tree-item">
    <div v-for="item in treeData" :key="item.id">
      <div class="item-title">{
  { item.name }}</div>
      <div v-if="item.children && item.children.length" class="item-childen">
        <my-tree :treeData="item.children"></my-tree>
      </div>
    </div>
  </div>
</template>

<script>
export default {
     
  name: 'myTree',
  props: {
     
    treeData: {
     
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-item {
     
  .item-title {
     
    padding: 4px 8px;
  }
  .item-childen {
     
    padding-left: 20px;
  }
}
</style>

src/App.vue

<template>
  <my-tree :tree-data="treeData"></my-tree>
</template>

<script>
const treeData = [
  {
      id: 1, name: '一级1' },
  {
     
    id: 2,
    name: '一级2',
    children: [
      {
      id: 3,