【Vue】点击父组件空白处让子组件隐藏

在做项目时需要实现在点击空白区域（即子组件外部）使得下拉窗口（子组件）隐藏

点击目标区域之外关闭目标区域

在网上看到很多教程都是通过添加点击事件监听document.addEventListener，监听click事件

当鼠标事件不发生在元素内部时，设置显隐属性为false

代码实现如下：

• vue代码

<template>
  <div class="test">
     <!-- 注意这里必须要加.stop阻止事件冒泡 -->
    <button @click.stop="show">点我出现</button>
    <div v-show="isShow" ref="box" class="box"><span>控制我的显隐状态</span></div>
  </div>
</template>

• js代码

export default {
  name: "Test",
  data() {
    return {
      isShow:true
    };
  },
  computed: {},
  mounted() {
    document.addEventListener("click", (e) => {
      if (!this.$refs.box.contains(e.target)) {
        this.isShow = false;
      }
    });
  },
  methods: {
    show(){
      this.isShow=true
    }
   
  },
}

但是这种方法并不能解决我的问题！

我要操作的下拉窗口是子组件，会报错

报错内容如下：

Uncaught TypeError: _this.$refs.box.contains is not a function at HTMLDocument.eval

不知道为什么在子组件上就不可以

总之上面的方法适用于点击目标区域之外关闭目标区域

---

点击组件外部隐藏组件自身

功夫不负有心人，总算让我在一篇文章中找到了解决办法

这种方法适用于解决vue点击组件外部隐藏组件自身

所以在这里分享给大家

其实非常简单

1. 在最外层div中添加一个@click.stop阻止事件冒泡
2. 在mounted中给body添加一个点击事件，事件触发组件的隐藏

具体代码实现：

<template>
  <div id="app" @click.stop>
    <button @click="show">点我显示子组件中的按钮</button>
    <Test  v-show="isShow" ref="box"/>
  </div>
</template>

<script>
import Test from './components/test.vue'
export default {
  name: "App",
  components: {
    Test
  },
  data(){
    return{
      isShow:true,
    }
  },
  methods: {
    show(){
      this.isShow = true;
    }
  },
  mounted(){
    document.addEventListener("click", (e) => {
        this.isShow = false;
    });
  }
};
</script>

参考文章：

https://www.cnblogs.com/MisterHe/p/10291354.html