Avoid mutating a prop directly since the value will be overwritten whenever the parent component

Vue项目中，使用Element-UI Dialog对话框组件，关闭弹框时弹出如下警告：

vue.runtime.esm.js?2b0e:619 [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: "visible"

意思是子组件dialog里面直接修改了来源于父组件的visible属性,这是不合法的。

dialog使用方式如下：

dialog

查了下 [sync修饰符]（双向绑定）的原理，才明白这里不能用双向绑定，因为这样子组件会修改父组件visible的值。那么，把.sync 提到父组件里面去不就好了么……

父组件：

父组件

或简写为：

<add-pack v-if="visible" :visible.sync="visible"></add-pack>

子组件：
dialog提供before-close作为关闭前的回调，在这里触发事件就好了：

before-close

close

总结

不要在子组件里修改父组件的状态。