v-model 控制组件显示隐藏

1、v-model原理

监听了 input事件

2、实现

//组件引用
<user-detail v-model="showUserDetail"></user-detail>
data() {
    return {
        showUserDetail: false
     }
}

showDeail(){ //打开子组件
     this.showUserDetail = true;
}

//userDetail组件实现
<div v-if="show">我是userDetail</div>

props: {
    value: {  //父组件使用v-model 默认vue会给子组件传一个名称为value的props
        type: Boolean,
        default: false
    }
}

data() {
    return {
        show: false
     }
}

watch: { //监听value变化，同步show的值（因为 子组件不能修改父组件传过来的props，所以需要重新定一个字段来同步变化）
    value(n, o) {
        this.show = n;
    }
}

close() {
   this.$emit('input', false); // 需要关闭组件时，触发input事件 设置父组件showUserDetail 为false
 }