vue 递归组件 代码实例
时间: 2023-08-13 09:58:19 浏览: 54
当然,我可以为您提供一个简单的 Vue 递归组件的代码实例。下面是一个示例,展示了如何创建一个递归组件来渲染树形结构的数据:
```vue
<template>
<div>
<ul>
<tree-item :item="data"></tree-item>
</ul>
</div>
</template>
<script>
import TreeItem from './TreeItem.vue';
export default {
components: {
TreeItem
},
data() {
return {
data: {
id: 1,
name: 'Root',
children: [
{
id: 2,
name: 'Child 1',
children: [
{
id: 3,
name: 'Grandchild 1',
children: []
},
{
id: 4,
name: 'Grandchild 2',
children: []
}
]
},
{
id: 5,
name: 'Child 2',
children: []
}
]
}
};
}
};
</script>
```
然后,在同级目录下创建一个名为 `TreeItem.vue` 的组件文件,如下所示:
```vue
<template>
<li>
{{ item.name }}
<ul v-if="item.children.length">
<tree-item v-for="child in item.children" :key="child.id" :item="child"></tree-item>
</ul>
</li>
</template>
<script>
import TreeItem from './TreeItem.vue';
export default {
components: {
TreeItem
},
props: {
item: Object
}
};
</script>
```
这个示例中,`TreeItem` 组件用于渲染每个树节点,并递归地渲染子节点。通过传递 `item` 属性来定义每个节点的数据。在根组件中,我们将根节点数据传递给 `TreeItem` 组件来开始整个递归过程。
希望这个示例能帮助您理解 Vue 中的递归组件的使用!如有任何问题,请随时提问。