写在前面
首先，本篇文章所开发的组件并非一个已经开源的上线组件，所以如果你急于需要一个插件来只做你的项目，那么并不能带给你及时的帮助。这个组件的开发预计写两篇文章，一遍写组件，一篇写组件逻辑。这篇文章也是我自己开发的从无到有的过程，所以它可以为你提供一些Tree组件开发的思路，代码写到一定程度，不能完全依赖插件了，有时间可以看看插件源码或者动手去开发，这样真的能加深对技术的掌握程度。
开发过程
1.数据仓库-Vuex
2.组件的循环创建-递归组件
需求决定了我的技术选型，项目需求是一个中国各级政府列表的选择，后台基于大数据去汇总各级政府网站的文章决策，然后交给前端去展示，左侧显示各级政府的Tree，右侧显示具体文章。因为政府数据的不确定性，所以显示政府的Tree也是动态获取的，就比如北京市下级的海淀区政府不一定存在政策文章那么就不会在树状结构里显示对应的名称。
因此树状结构的data是变化的而不是在初始化的时候就固定好的，采用Vue数据驱动Dom的思想，data有多少层级，Dom就有多少层级，data不定，所以Dom也无法提前定义好层级，因此使用了Vue的递归组件，组件递归自身实现无限制层级的渲染。需求中每一个节点的Tree都具有增删改的功能，因为data是单例的，全局维护着一个data数据源头，增删改也就是操作data第n个子节点的某个子元素，因此采用了Vuex作为一个data存放的仓库。
data的数据结构：
每一个节点包含id，label，nodes三个属性，nodes往下延伸子节点，一共有多少级不确定根据后台获取得到。
递归组件
递归组件的示例如下：TreeMenu.vue
TreeMenu.vue声明组件TreeMenu,并向外暴露，在组件内部调用自身<tree-menu>,也就是一个递归的思想，绑定的dataNodes有多少层级，那就会递归多少层，因为每一层都有v-for都会循环子节点。绑定具体数据的时候再具体分析。
1.Tree.vue、TreeMenu.vue
创建Tree.vue文件，作为组件树的入口文件，类似于App.vue，数据data会在Tree.vue进行一些初始化的操作。
在Tree.vue入口组件里引入子组件TreeMenu.vue，并且向子组件传递数据label和nodes，这里data先预定义一个简单的对象，后面会动态获取。
TreeMenu.vue作为树形菜单组件，负责递归和数据渲染，它会接受来自入口组件传递来的label和nodes数据，进行渲染，并且继续递归传递nodes和label。
在从父组件接收nodes和label后，先循环渲染n个tree-menu组件，然后每一个tree-menu又会递归自身，所以数据就这样一层层向下传递 nodes=>nodes.node=>nodes.node.node,此时已经完成了数据与Dom的绑定，可以修改一下Tree.vue中的tree数据源，看一下组件是否动态改变了。现在渲染如下图：
数据正确渲染，现在需要加一些样式和点击事件（展开与收缩），就不做详细介绍了，代码如下: (向下传递depth参数来获取层级索引)
修改后会展开收缩与缩进，一些箭头旋转等样式问题就不详细写了。
这一篇主要写递归组件的简单实现，下一篇写数据获取方面，其实现在组件已经写好了，我们现在只需要关注数据层，数据变化Dom会自动响应变化的。
