Vue 递归组件(构建树形菜单)

阳光穿透心脏的1/2处 2023-01-02 06:25 178阅读 0赞

对于一些有规律的DOM结构，如果我们再一遍遍的编写同样的代码，显然代码是比较繁琐和不科学的，而且自己的工作量会大大增加，

那么有没有一种方法来解决这个问题呢？

答案是肯定的，我们可以通过 **递归** 方式来生成这个结构，当然在 Vue 模板中也是可以实现的，我们可以在 Vue 的组件中调用自己本身，这样就能达到目的。

当然，在 Vue 中，组件可以递归的调用本身，但是有一些条件：

*  该组件一定要有 **`name`** 属性
 *  要确保递归的调用有终止条件，防止内存溢出

为了方便理解递归组件，我写了一个小小的 Demo：

下面有这样一个数据，我们希望把它做成一个文件树一样的结果：

treeData: {
            title: "Web全栈架构师",
            children: [
              {
                title: "Java架构师"
              },
              {
                title: "JS高级",
                children: [
                  {
                    title: "ES6"
                  },
                  {
                    title: "动效"
                  }
                ]
              },
              {
                title: "Web全栈",
                children: [
                  {
                    title: "Vue训练营",
                    expand: true,
                    children: [
                      {
                        title: "组件化"
                      },
                      {
                        title: "源码"
                      },
                      {
                        title: "docker部署"
                      }
                    ]
                  },
                  {
                    title: "React",
                    children: [
                      {
                        title: "JSX"
                      },
                      {
                        title: "虚拟DOM"
                      }
                    ]
                  },
                  {
                    title: "Node"
                  }
                ]
              }
            ]
          }
    复制代码

先写一个树组件(Item)：

<template>
      <li>
        
        <div @click="toggle">
          
          {
       {model.title}}
          
          <span v-if="isFolder">[{
       {open?'-':'+'}}]</span>
        </div>
        
        <ul v-show="open" v-if="isFolder">
          
          <Item v-for="model in model.children" :model="model" :key="model.title"></Item>
        </ul>
      </li>
    </template>
    <script>
    export default {
      name: "Item",
      // 如果想使用此组件，则需要传递的数据
      props: {
        model: {
          type: Object,
          required: true
        }
      },
      data() {
        return {
          // 默认不显示下级目录
          open: false
        };
      },
      computed: {
        // 控制是否有下级目录和显示下级目录
        isFolder() {
          return this.model.children && this.model.children.length;
        }
      },
      methods: {
        // 点击折叠展开的方法
        toggle() {
          if (this.isFolder) {
            this.open = !this.open;
          }
        }
      }
    };
    </script>
    复制代码

具体代码的功能已在上面注释

**再次强调，这个组件必须要含有 name 这个属性，如果没有 name 这个属性会造成控件自身不能调用自身，而且调用的时候最好绑定一个 key 值，因为这个 key 值是唯一的标识**

**另外需要注意，当递归组件的时候，需要有一个条件来终止递归，在这里使用 v-for 隐形条件终止递归**

然后在外部组件引入这个组件，并绑定数据使用，如下：

<template>
      <div>
        <ul>
          
          <Item :model="treeData"></Item>
        </ul>
      </div>
    </template>
    <script>
    // 导入递归组件
    import Item from "./views/Item";
    export default {
      name: "App",
      data() {
        return {
          // 需要实现递归的数据，上面已经给出
          treeData: {...
          }
        };
      },
      components: {
        // 注册组件
        Item
      }
    };
    </script>
    复制代码

上面的代码已经实现了一个递归树形结构了，展示效果如下：

![abb21abde996959282061dadf4fe1f75.png][]

后面是 + 号 的可以点击展开，是 - 号 的可以点击折叠

虽然这篇博客看起来很简单，只是一个小的知识点，但是Vue的递归组件确实是一个非常强大的功能。可以用来实现一些类似文件树、部门树、级联选择这样的组件，在实际业务开发中这些组件也经常用到，还是非常重要的~

转载：https://juejin.cn/post/6844903913250881550

[abb21abde996959282061dadf4fe1f75.png]: /images/20221120/ab6e5dd5455d414e8b4796c7daa19452.png