需求描述：

页面是一个父组件，页面上有点击事件，触发弹框，这时候，因为弹框可能是公用的组件，就单独封装一个组件，以便以后可以复用。

// 这是注册在父组件里面的子组件customerInfoDialog.vue
<customerInfoDialog:dialogCustomerVisible.sync="customerServiceDialogShow"></customerInfoDialog>

// 事件
 updateRow(row) {
     console.log(row, '编辑每一行');
     this.customerServiceDialogShow = true;   // 点击事件弹框设置为true
    }

<template>
    <el-dialog :visible.sync="visible" >
        <div>
            这是客服小记详情页
        </div>
    </el-dialog>
</template>
<script>
export default {
    name: 'customer-info-dialog',
    data() {
        return {
            visible: false
        };
    },
    watch: {
        dialogCustomerVisible: {
            handler(val) {
                this.visible = val;
            },
            deep: true,
            immediate: true
        }
    },
    props: {
        dialogCustomerVisible: {
            type: Boolean,
            require: true,
            default: false
        }
    },
    methods: {  }
};
</script>

问题描述：

如果就像上面写的话，会出现第一次点击事件，弹框弹出，再关闭。第二次在点击弹框，弹框就失效了，弹不出了。打开控制台看控制弹框显示的值，发现下面的情况。第一次打开弹框是父组件传递给子组件的值设置为true，弹框打开，这是正常的，但是关闭的时候，是子组件触发的事件关闭弹框，子组件触发的事件只能改变子组件里面的visible，并不能改变父组件里面的visible，所以才会有这样的现象。

弹框第一次打开的时候

第一次关闭的时候

解决办法：子组件里面使用this.$emit("update:xxx",false)事件去改变父组件里面的值。

<template>
    <el-dialog :visible.sync="visible" @click="hidden">
        <div>
            这是客服小记详情页
        </div>
    </el-dialog>
</template>
<script>
export default {
    name: 'customer-info-dialog',
    data() {
        return {
            visible: false
        };
    },
    watch: {
        dialogCustomerVisible: {
            handler(val) {
                this.visible = val;
            },
            deep: true,
            immediate: true
        }
    },
    props: {
        dialogCustomerVisible: {
            type: Boolean,
            require: true,
            default: false
        }
    },
    methods: {
        hidden() {
            this.$emit('update:dialogCustomerVisible', false);
        }
    }
};
</script>
<style lang="scss" scoped></style>

在使用中父组件里的.sync修饰符，和this.$emit("update:xxx")搭配使用。当然也可以不使用.sync，不使用 async的话，子组件里面应该使用this.$emit()抛出一个事件，父组件里面注册这个事件，改变值，类似于这样

// 子组件   
<customerInfoDialog
        :dialogCustomerVisible="customerServiceDialogShow"
        @updateDialogCustomerVisible="customerServiceDialogShow = false">
</customerInfoDialog>