vue 循环 递归组件_vue的递归组件以及三级菜单的制作

js里面有递归算法，同时，我们也可以利用props来实现vue模板的递归调用，但是前提是组件拥有 name 属性

父组件:slotDemo.vue:

li

padding-left 30px

import simple3 from "./simple/simple3.vue";

export default{

data(){

return {

tree: [{

label: "一级菜单",

test:1,

children: [{

label: "二级菜单",

test:2,

children: [{

label: "三级菜单",

test:3

}]

}]

}]

}

},

components: {

simple3

}

}

子组件：simple3.vue

{{tree.label}}

.test2

list-style disc

.test3

list-style decimal

export default{

name: "simple3",

props: ["tree"]

}

上面是一个子组件，定义了 name 为 simple03，然后在模板中调用自身，结合 v-for 实现递归

为了防止出现死循环，在调用自身的时候，加入了 v-if 作为判定条件

父组件中调用的时候，需要通过 props 传入一个 tree;

为了对每一级菜单有所区分，我对tree里面的每一个子集合里面加了一个test字段来区分是哪一级的菜单然后对其不同的样式进行处理

最后的效果：