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的報錯了