2023年6月22日发(作者：)

[Vuejs]⼿把⼿教你创建递归树组件（附完整demo）算法学习中，递归和迭代是⼀对孪⽣兄弟。下⾯我们就⽤递归来完成vue中的组件递归。也将认识到组件的递归，实际上就是数据递归的外在形式。所以我们完成组件的递归，最重要的还是定义好可以递归的数据结构。Here we go.下⾯我们在VueJS⾥创建⼀个递归树组件，完整的Demo请创建⼀个树组件树组件的结构可以想像成⽂件⽬录+ 根⽬录 + ⽬录A + ⽬录A1 + ⽬录B复制代码可以把⽂件⽬录理解成树(Tree)，⽬录就是树的节点(Node)。树总是有⼀个根节点，从根节点上进⾏某⼀操作，找到⼦节点，重复同⼀操作，直到叶⼦节点(没有⼦节点的节点)。下⾯我们⽤label和children来表⽰⽬录名和⼦⽬录：const tree = { label: '根⽬录', children: [ { label: '⽬录A', children: [ // 叶⼦节点 { label: '⽬录A1' } ] }, { label: '⽬录B' } ]}复制代码上⾯的tree数据就是我们要创建的Tree组件要传⼊的data，然后组件长下⾯这样，接收props，渲染根节点：复制代码TreeNode组件的主要⽬的还是创建⼀个根节点，同时引⼊treeData。定义node节点⼀个node节点的结构长下⾯这样，必需要有⼀个label属性和可能的children。从数据结构上就可以看出递归的样⼦了，所以html上的递归归根到底还是数据的递归{ "label": "", "children": [ // begin ⼦节点 { "label": "", children: [] }

// end ]}复制代码的详解可以看到此组件的name为node，然后组件⾥⾯⽤到了node⾃⾝，但是不需要在components⾥显式引⽤。 这就是组件递归的关键点了复制代码各⾃归位最后我们创建⼀个来传递上⾯定义好的treeData给组件,如下⾯所⽰：复制代码结语好好练习下吧，希望对你理解递归组件有帮助。