子组件使用:visible.sync=“visible“进行双向的绑定导致该弹窗与其他弹窗同时显示的问题

问题描述：最近写代码时遇到了一个问题：点击A弹窗后关闭，继续点击B弹窗，这时会同时弹窗A、B两个弹窗。经过排查后发现在子组件定义时使用了:visible.sync="visible"属性进行双向的数据绑定

<template>
<el-dialog 
    title="试题详情" 
    :visible.sync="visible" 
    width="600px" 
    :close-on-click-modal="false" 
    :show-close="true">
<!-- 其他代码 -->
</template>

同时控制台会出现警告信息，因为在子组件中直接修改了父组件传递的 prop 值。在 Vue 中，不推荐直接修改 prop，而是应该通过事件通知父组件进行修改

将其修改为单向数据传递:visible="visible"并使用@close事件和 handleClose 方法来通知父组件更新值，该情况就会消失。

<template>
<el-dialog 
    title="试题详情" 
    :visible="visible" 
    @close="handleClose"
    width="600px" 
    :close-on-click-modal="false" 
    :show-close="true">
<!-- 其他代码 -->
</template>

<script>

methods: {
    // 添加处理关闭的方法
    handleClose() {
      this.$emit('update:visible', false)
    }
}

</script>

目前并不清楚为什么会出现这样的情况，欢迎各位大佬在评论区答疑解惑o(^▽^)o