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

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

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

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

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





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

你可能感兴趣的:(java,前端,javascript)