利用name参数实现组件的递归调用
一、name的定义
官方文档:给出name
的定义:
翻译:
允许组件在其模板中递归调用自身。 请注意,当组件在Vue.createApp({}).component({})
中进行全局注册时,全局ID会自动设置为其名称。
指定name
选项的另一个好处是调试.命名的组件会产生更有用的警告消息。 另外,在vue-devtools
中检查应用程序时(打开新窗口),未命名的组件将显示为<AnonymousComponent>
,这不是很有用。 通过提供name
选项,您将获得更多信息的组件树。
二、运用
通过查阅文档大概明白name选项是为了给组件一个ID,组件通过这个唯一ID去定位他。于是我想到了利用这个选项去事项组件的递归调用。
递归组件使用方法
<article>
<div class="item" v-for="(item,index) in list" :key="index">
<div class="item-title">
<span class="item-title-ticket"></span>
{{item.title}}</div>
<div v-if="item.children" class="item-children">
<DemoList :list="item.children"></DemoList>
</div>
</div>
</article>
</template>
<script>
export default {
name: "DemoList", /*指组件自身组件调用自身组件*/
props: {
list: Array
},
data() {
return {};
}
};
</script>