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

本文章由javascript技术分享原创和收集