在从父组件接收nodes和label后，先循环渲染n个tree-menu组件，然后每一个tree-menu又会递归自身，所以数据就这样一层层向下传递nodes=>nodes.node=>nodes.node.node,此时已经完成了数据与Dom的绑定，可以修改一下Tree.vue中的tree数据源，看一下组件是否动态改变了。现在渲染如下图：
数据正确渲染，现在需要加一些样式和点击事件（展开与收缩），就不做详细介绍了，代码如下: (向下传递depth参数来获取层级索引)
//Tree.vue <template> <div> <tree-menu :label="tree.label" :nodes="tree.nodes" :depth="0"></tree-menu> </div> </template> //TreeMenu.vue <template> <div> <div :style="indent" @click="toggleChildren">{{label}}</div> <div v-if="showChildren"> <tree-menu v-for="(item, index) of nodes" :key="index" :nodes="node.nodes" :label="node.label" :depth="depth + 1" ></tree-menu> </div> </div> </template> <script> export default { name: "TreeMenu", props: ["label", "nodes"], data() { return { showChildren: false }; }, methods: { toggleChildren() { this.showChildren = !this.showChildren; } }, computed: { indent() { return { transform: `translate(${this.depth * 20}px)` }; } } }; </script>
修改后会展开收缩与缩进，一些箭头旋转等样式问题就不详细写了。
总结
以上所述是小编给大家介绍的Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: