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
由于 visible 使用了 sync 修饰符 (双向绑定), 查了下官网 dialog API, 解决办法有如下 2 种:
去掉 sync, 监听 open 和 close 方法, 懒人绝对不选这个.
去掉 sync
before-close + update:myPropName 模式触发事件
父组件:
父组件
或简写为:
<add-pack v-if="visible" :visible.sync="visible"></add-pack>
子组件:
dialog 提供 before-close 作为关闭前的回调, 在这里触发事件就好了:
before-close
close
总之, 一句话: 不要在子组件里修改父组件的状态. 如果层级太深, 不好处理, 放 store.
来源: http://www.jianshu.com/p/498e7b9c8eba