关于使用element-ui Dialog 弹出框,只能弹出一次的问题

1,548 阅读1分钟

今天修改别人代码发现一个其他的问题,将element dialog 封装之后,传入visible 以 props传入 来进行控制显示隐藏,会导致 弹出框只显示一次,第二次无法弹出。

并报错以下 [Vue warn]: 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: "dialogVisible"

报错分析

通过props传递给子组件的dialogVisible值,不能在子组件内部修改

解决方案

调用element中diaolog的before-close属性监听dialog的关闭回调,在父组件修改传递给子组件的dialogVisible值

子组件

image.png

image.png

父组件

image.png

image.png