在自定义组件中使用v-model

父组件：

<template>
  <div>
    <BgMask v-model="bgFlag"></BgMask>
  </div>
</template>
<script>
export default {
  data:()=>({
    bgFlag:true
  }),
  components:{
    BgMask:()=> import ('../components/BgMask')
  },
}
</script>

子组件：

<template>
  <div class="bg-wrap" v-if="bgFlag"  @click="clickClose()">
      弹窗
  </div>
</template>
<script>
export default {
  props:{
    bgFlag:{
      type:Boolean
    }
  },
  model:{
    prop:'bgFlag',
    event:'click'
  },
  methods:{
    clickClose(){
      this.$emit('click',false)
    }
  }
}
</script>
<style>
.bg-wrap{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background: radial-gradient(black, transparent);
    z-index: 1;
    bottom: 0;
}
</style>

https://cn.vuejs.org/v2/api/#model