vue中的递归组件
官方文档:组件是可以在他们自己的模板中调用自身的。不过它们只能通过 name选项来做这件事。注意三点:
- 递归组件必须要有name属性
- 递归组件调用自身的时候最好有一个key
- 递归组件需要一个条件来终止递归
组件递归用:
组件递归之后,子组件得数据和方法都是父组件得数据和方法。
- 数据的传输:
存储的是当前的数据 - 方法的调用:
调用的是当前的方法,需要在子组件中声明方法才能用
<template>
<tree-folder v-for="item in treeData" :key="item.id" @refresh="getTreeData" />
</template>
<template>
<div>
<template v-if="item.children && item.children.length">
<el-submenu :index="item.id">
<template slot="title"><span>{{ item.title }}</template>
<tree-folder v-for="child in item.children" :key="child.id" @refresh="$emit('refresh')" />
</el-submenu>
</template>
<template v-else>
<el-menu-item>{{ item.label }}</el-menu-item>
</template>
</div>
</template>