Vue自定义组件中使用Element-UI Dialog组件,点击关闭报错 [Vue warn] Avoid mutating a prop directly
这是由于自定义组件使用了传入的prop作为 Dialog 的visible绑定值,导致Dialog关闭直接修改了prop而被vue警告,并且操作失效
解决方法也很简单
组件引用是传入属性使用 .sync 修饰符
<comp :visible.sync='visible'></comp>
组件内的 Dialog 使用 before-close 劫持,然后 调用 $emit(‘update:visible’, false),关闭Dialog就可以了
<template>
<div>
<el-dialog title='xx' :visible.sync='visible' :before-close='beforeClose'>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
visible: Boolean,
},
methods: {
beforeClose () {
this.$emit('update:visible', false);
},
}
};
</script>
这样操作就是在父组件修改 visible的值,就不会引发vue的报错了