vue3 组件自己引用自己 递归组件 组件命名
在Vue 3中，一个组件可以递归地引用自身，这通常用于表示递归数据结构，如树形菜单或组织结构图等。为了使递归组件正确工作，你需要给它一个名字，这样它才能在模板中引用自身。
下面是一个简单的递归组件示例，它使用了一个名为"TreeNode"的组件来表示树节点，并递归地引用自身来显示每个节点的子节点。
<template>
<div>
<p>{{ node.label }}</p>
<TreeNode v-for="child in node.children" :node="child" :key="child.id" />
</div>
</template>
<script>
export default {
name: 'TreeNode', // 组件命名为TreeNode
props: {
node: Object // 接受一个名为node的prop，它是一个对象，包含节点的数据
}
};
</script>在这个例子中，TreeNode组件通过v-for指令递归地渲染自己，并通过node属性传递子节点数据。通过给组件一个唯一的name选项，Vue 可以追踪递归组件的多个实例。
评论已关闭