vue 弹层开启关闭

场景：很多时候点击一个按钮弹出一个弹层组件，涉及到组件的开启关闭；

涉及知识点：visible.sync，可以直接利用('update:visible', false)的方式进行更新同步状态

涉及逻辑：父组件在子组件入口设置 ,然后通过visibleName变量在父组件中控制子组件打开和关闭，子组件通过$('update:visible', false) 反向更新父组件的visibleName；

代码：

// 父组件：
<Child :visible.sync='visibleFather' />

data() {
    return {
        visibleFather: false
    }
}

// 子组件  一般是一个弹层组件
<component :visible.sync='visibleChild'>

props: {
    visibleFather: {
        type: Boolean,
        default: false
    }
}

data() {
    return {
        visibleChild: this.visibleFather
    }
}

// 重点
watch: {
    visibleFather (val) {
        this.visibleChild = val
    },
    visibleChild(val) {
        this.$emit('update:visible', val);
    }
}