Vue自定义组件中使用Element-UI Dialog组件，点击关闭报错 [Vue warn] Avoid mutating a prop directly

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的报错了