vue2 父子组件使用v-model 控制弹窗model显示隐藏

vue官方传送口

1. 父组件
   使用v-model绑定变量，控制显示

   <Model v-model="dialogVisible"></Model>
   

2. 子组件
   和props同层级写model

   props里面接受的参数dialogVisible和model里面prop保持一致，默认是value

    props: {
       // 显示隐藏
       dialogVisible: {
         type: Boolean,
         default: false,
       },
     },
     model: {
       prop: "dialogVisible",
       event: "hide",
     },
   

3. 更新

   computed: {
       visible: {
         get() {
           return this.dialogVisible;
         },
         set(val) {
           this.$emit("hide", val);
         }
       }
     }