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
总结
不要在子组件里修改父组件的状态。