vue单击空白部分关闭组件

vue单击空白部分关闭组件

子组件html部分

<div class='add_address' @click="closeNullModule($event)">
    <div class="content" ref="content"></div>
  </div>

子组件js部分

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

methods:{
   closeNullModule(e) {
      this.$nextTick(() => {
        let content = this.$refs.content
        if (content && !content.contains(e.target)) {
          this.$emit('update:value', false)
        }
      })
    }
 }

父组件调用

    <tabTime ：vaule.sync="tabVal"></tabTime>