写在前面

首先，本文开发的组件不是一个开源的在线组件，所以如果你急于需要一个插件只做你的项目，它不会给你带来及时的帮助。这个组件的开发预计会写两篇文章，一篇针对组件，一篇针对组件逻辑。本文也是我自己从头开始开发的一个过程，所以可以给大家提供一些开发Tree组件的思路。如果代码写到了一定程度，就不能完全依赖插件了。有时间的话可以看看插件源代码或者自己开发，这样真的可以加深对技术的掌握。

显色法

1.数据仓库-Vuex

2.组件的循环创建-递归组件

需求决定了我的技术选择。项目需求是中国各级政府的选择清单。后台汇总各级政府网站基于大数据的文章决策，然后提交给前端展示。左侧显示各级政府树，右侧显示具体文章。由于政府数据的不确定性，显示政府的每一级树也是动态获取的。比如北京的下一级海淀政府可能一个小时前还没有一定的政策文章，所以北京节点的子节点不会包括海淀区，但是网站10分钟前发布了一篇文章，所以需要在北京增加海淀区。为了获得良好的实时效果，每一级的子节点都不是固定的。

因此，树结构的数据被改变，而不是在初始化时被固定。数据驱动的Dom的思想和数据一样有很多层次，数据是不确定的，所以Dom无法提前定义层次，所以决定采用Vue的递归组件，组件递归实现无限级渲染。需求中每个节点的Tree都有增删改功能，因为数据是单个实例，全局维护一个数据源，增删改就是操作数据第n个子节点的一个子元素，所以采用Vuex作为存储数据的仓库(这不是组件库，而是一个项目的应用)。

项目要点：

1.动态加载子节点，也就是说在加载页面时，根节点的nodes子节点数组可能是一个空数组，所以每次点击该节点就可以得到子节点数组。

2.数据对象是全局单实例的树节点对象，需要在每次获取新的子节点时进行维护。因为数据是与dom动态绑定的，所以每次数据对象在内部发生变化时，dom都会被重新绘制。

Vue对虚拟dom的映射是使用diff算法优化的，所以不用担心，重绘会造成页面闪屏

树形数据结构如下：

让数据={ID :' 01 '，标签: '政府机构'，节点： [{ID :' 02 '，标签: '中央机关'，节点： [{ //.//.}]}，ID : ' 03。像这样显示：

每个节点包含三个属性：id、标签和节点，节点向下延伸到其子节点。根据背景获得多少级不确定性。

递归组件

简单递归组件的示例如下：

Template div class='tree-menu' //该组件不断使用自身，并递归调用dataNodes ' : key=' index '/tree-menu/div/templatescript export default { name : ' tree menu '，//组件名称必须写成data(){ return { dataNodes 3360 } {//.} } } } }/script TreeMenu . vue声明组件tree menu并对外公开，在组件内部调用自己，这是一种递归思想。由于绑定数据节点有许多层，它将递归地有许多层，因为每一层都有v-循环子节点。绑定具体数据时，具体分析。不断的呼唤自己，当然这只是一个例子，实际情况需要修改：

创建一个新的TreeMenu.vue作为显示节点的逻辑组件：

模板div class=' tree-menu ' div { { label } }/div//节点名称tree-menu //如果nodes.length0，则节点' : key=' Index ' : nodes=' node '的子节点v-for='(node，Index)。nodes '//子节点的子节点向下传递：标签=' node。label '/tree-menu/div/Templatescriptexportdefault { name : ' tree menu '，pros :[' label '，' nodes']，//数据通过pros向下传递，唯一的全局数据源是data(){ return }；}};/script创建Tree.vue作为节点树：的入口

template div class=' tree-only ' tree-menu : label=' tree . label ' : nodes=' tree . nodes '/tree-menu/div/template script从导入TreeMenu '。/tree menu . vue ' export default { name : ' tree '，data(){ return { tree : { ID : ' 01 '，labe:' total level '，node :[{ ID : ' 02 '，labe : ' Level 1 '，node :[{ labe : ' Level 1-1 ' }]，{ ID : ' 03 '，Label3360 ' Level 2 '，node 3:}}}，components 3360 { tree menu } }/script将子组件TreeMenu.vue引入Tree.vue入口组件，并将数据标签和节点传递给子组件。这里，为数据预定义了一个简单的对象，这些数据将在以后动态获取。

TreeMenu.vue作为树菜单组件，负责递归和数据呈现。它将接受从门户组件传输的标签和节点数据，呈现它，并继续递归地传输节点和标签。

从父组件接收节点和标签后，先循环渲染N个树菜单组件，然后每个树菜单会自己递归，这样数据就一层一层往下传递，nodes=nodes . node . node . node，此时数据和Dom的绑定已经完成。您可以在Tree.vue中修改树数据源，以查看组件是否已动态更改。现在渲染以下图像：

为了正确渲染数据，我们需要添加一些样式和点击事件(扩展和收缩)，因此我们不会详细介绍它们。代码如下：(向下传递深度参数以获得分层索引)

//tree . vuetemplate div class=' tree-only ' tree-menu : label=' tree . label ' : nodes=' tree . nodes ' : epth=' 0 '/tree-menu/div/template//tree menu . vuetemplate div class=' tree-menu ' div : style=' indent ' @ click=' toggleChildren ' { label } }/div-if=' showChildren ' tree-menu v-menu-for='节点(项，索引)}，methods : { toggleChildren(){ this . show children=！this.showChildren} }，computed : { indent(){ return { transform : ` translate($ { this . depth * 20 } px)` }；} }};/script修改后会膨胀收缩缩进，一些箭头旋转等样式问题就不详细写了。

摘要

以上就是边肖介绍的Vue递归组件Vuex开发的树组件Tree -递归组件的简单实现。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！