子组件使用: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