Vue 中对ElementUI的Dialog弹窗组件封装

1，子组件的写法

<el-dialog
    title="提示"
    :visible.sync="visible"
    :close-on-click-modal="false"
    @close="QualityDialogClose"
>

    <span slot="footer" class="dialog-footer">
        <el-button @click="QualityDialogClose">取 消</el-button>
        <el-button type="primary" @click="QualityDialogClose">确 定</el-button>
    </span>
</el-dialog>

<script>
export default {
    name: "QualityDialog",
    components: {},
    props: {
        QualityDialogFlag: {
            default: false
        },
    },
    data() {
        return {
            visible: false
        };
    },
    created() {},
    mounted() {},
    methods: {
        QualityDialogClose() {
            this.$emit("update:QualityDialogFlag", false);
        }
    },
    watch: {
        QualityDialogFlag() {
            this.visible = this.QualityDialogFlag;
        },
    }
};
</script>

2，父组件的写法
（注意: 父组件在给子组件传值的时候必须使用.sync, 不然会出现实时监控失败）

<template>
	<QualityDialog :QualityDialogFlag.sync="QualityDialogFlag"/>
	<el-button type="primary" @click="QualityClick">打开Dialog</el-button>
</template>
<script>
export default {
    components: {
        QualityDialog: ()=> import("./QualityDialog")
    },
    data() {
        return {
            /** QualityDialog 组件需要的数据 */
            QualityDialogFlag: false
            /** QualityDialog 组件需要的数据 */
        };
    },
    methods: {
        QualityClick() {
            this.QualityDialogFlag = true
        }
    }
};
</script>

3，解释使用.sync修饰符
可以通过.sync修饰符来达到双向绑定的效果
@close=“$emit(‘update: QualityDialogFlag’ , false)” 说明改变父组件的数据

不添加.sync修饰符, 虽然在关闭弹框的时候修改了父组件的数据, 但是下次再次打开的时候就会失败, 原因是父组件没有监听到子组件的数据改变, 父子组件没有双向绑定