Vue-component | 极其简易Tree列表

日常开发中积累了不少可能对一些开发有帮助的简单易用的组件，好记性不如烂笔头，想对过去的一些零零乱乱的东西做一些总结，反省自己的同时也便于思考一些更优的方法，提升下开发思维。
代码传送门（感觉有作用的的同学帮忙点下❤️️）

效果截图

这是一个简单的树形列表,可展开收起。

Tree.gif

组件结构

由多层列表嵌套组成。

    

        

            
...
         
    

核心代码

Tree
最顶层结构

Item
递归调用自己的核心

传入的数据格式

treeData: {
        title: '地球',
        children: [
          {
            title: '人'
          },
          {
            title: '水果',
            children: [
              {
                title: '橘子'
              },
              {
                title: '苹果'
              }
            ]
          },
          {
            title: '植物',
            children: [
              {
                title: '四君子',
                expand: true,
                children: [
                  {
                    title: '梅'
                  },
                  {
                    title: '兰'
                  },
                  {
                    title: '竹'
                  }
                ]
              },
              {
                title: '动物',
                children: [
                  {
                    title: '猪'
                  },
                  {
                    title: '狗'
                  }
                ]
              },
              {
                title: '气体',
                children: [
                  {
                    title: '空气',
                    children: [
                      {
                        title: '氧气'
                      }]
                  }]
              }
            ]
          }
        ]
      }

关键点

---

在这里主要使用的一些技术包括：

技术	概述	备注
递归组件	自己调用自己，要记得注明name	/
v-for	在这里搭配递归，将数据一层一层遍历展示	/

后续会持续更新其他一些有用的组件提供参考...