vue递归组件
vue支持递归组件，也就是组件自己调用自己，一般用于树形组件，来写个简单tree组件实例
- 父组件中
<template> <div class="tree-warp"> <my-tree :data="treeData"></my-tree> </div> </template>
```html
<template>
<div class="tree-warp">
<my-tree :data="treeData"></my-tree>
</div>
</template>
<script>
import myTree from "@/components/myTree";
export default {
components: { myTree },
data() {
return {
treeData: [
{
label: "冰箱"
},
{
label: "水果",
children: [
{ label: "苹果" },
{ label: "梨子" },
{ label: "葡萄" },
{
label: "喜欢的水果",
children: [
{ label: "水果1" },
{ label: "水果2" },
{ label: "水果3" }
]
},
{ label: "香蕉" }
]
},
{
label: "茶叶",
children: [
{ label: "铁观音" },
{ label: "西湖龙井" },
{ label: "毛尖" },
{
label: "红茶",
children: [
{ label: "红茶1" },
{ label: "红茶2" },
{ label: "红茶3" }
]
}
]
}
]
};
}
};
</script>子组件中根据name值来进行调用
<template>
<div class="my-tree">
<ul>
<li v-for="item in data" :key="item.label">
{{ item.label }}
<i class="iconfont el-icon-arrow-right" v-if="item.children"></i>
<my-tree v-if="item.children" :data="item.children"></my-tree>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "myTree",
props: {
data:{
type:Array,
default:()=>[]
}
},
watch:{
data(val){
console.log(val)
}
}
};
</script>
