关于javascript:递归组件组合拳无惧页面嵌套

介绍

递归组件在组件内嵌套组件时比拟罕用，我在这里举几个例子：
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(👈点击中转)