介绍
递归组件在组件内嵌套组件时比拟罕用，我在这里举几个例子：
1、后盾管理系统的menu菜单
2、教育零碎的题目列表
在遍历生成根底题时，遇到了综合题，综合题蕴含了所有根底题，此时就不必再写一遍根底题，间接调用本身组件即可，这样不管根底题外部嵌套多少层综合题，都能够生成题目列表。
如何实现递归组件？
父页面：失常引入组件
// 父页面<template> <div> <Circulation :dataInfo="dataInfo"/> </div></template> <script>import Circulation from '@/views/circulation.vue'export default { components: { Circulation }, data() { return { dataInfo: [ // ...... ] } },}</script>子组件
// circulation页面<template> <div> <div v-for="item in dataInfo"></div> // 其它逻辑...... // 如果遇到children -> 复用本身 <Circulation :dataInfo="item.children"/> </div></template> <script>export default { name: 'Circulation', // 肯定要设置name，于组件名雷同 props: { dataInfo: { type: Array, default: () => { return [] } }, },}</script>下面的代码就实现了递归组件，在子组件中不须要引入本身，只须要设置name，而后通过name复用组件即可
上面是你在教育类型我的项目中会遇到的场景：
留神点
1、事件冒泡
留神：递归组件的事件肯定要用.stop阻止冒泡，否则会报错
例如：@click.stop="onClose(item)"
2、prop值更新
在递归组件中通过事件更改prop的值时，会报错，提醒请防止在子组件中对prop进行间接更改Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "questionList"
防止间接更改 prop，因为每当父组件从新渲染时，该值都会被笼罩。相同，请应用基于道具值的数据或计算属性。被变异的道具："questionList"
递归组件尽量避免间接对prop进行批改，哪怕你应用了计算属性，也会报错提醒。
3、递归组件深层事件
因为是递归组件，层级的嵌套可能会很深，然而页面只有以后这一个，如果只解决以后层级的逻辑能够间接@click.stop="xxx"触发
如果须要将事件向父级回传，则须要应用emit，并且本身页面的递归组件上也须要设置事件，例如：
// 父页面<template> <div> <Circulation :dataInfo="dataInfo" @onChange="onChange"/> </div></template><script>import Circulation from '@/views/circulation.vue'export default { components: { Circulation }, data() { return { dataInfo: [ // ...... ] } }, methods: { // 触发事件 onChange() {}, }}</script>子页面
// circulation页面<template> <div> <div v-for="item in dataInfo"></div> // 其它逻辑...... // 如果遇到children -> 复用本身 <Circulation :dataInfo="item.children" @onChange="onChange"/> </div></template> <script>export default { name: 'Circulation', // 肯定要设置name，于组件名雷同 props: { dataInfo: { type: Array, default: () => { return [] } }, }, methods: { // 触发回传 onChange() { this.$emit('onChange') }, }}</script>这样做它的回传事件会层层递归，直到返回最上层。
在渲染层面，它是层层递。
在事件回传层面，它是层层归。
如果感觉该组件不错，欢送点赞、珍藏、转发✨哦~
浏览其它：
微信小程序用户隐衷API(点击中转)
前端换肤，聊一聊主题切换那些事(点击中转)
Shapes布局-文字盘绕动画(点击中转)
css绘制一个Pinia小菠萝(点击中转)
深刻了解Promise(点击中转)