如何在父组件中检测点击是否发生在子组件及其子元素内？

你报错的原因很明确：父组件通过ref获取的子组件是Vue组件实例，而非原生DOM元素，所以没有contains这个DOM方法。下面给两种靠谱的解决方式：

方法一：直接获取子组件的根DOM元素（适用于单根节点子组件） #

每个Vue组件实例都有$el属性，指向它挂载的根DOM节点。直接用这个属性替换原来的targetElement即可：

// 父组件代码
mounted() {
  window.addEventListener('click', this.handleClickOutside);
},
beforeUnmount() {
  // 别忘了清理事件监听，避免内存泄漏
  window.removeEventListener('click', this.handleClickOutside);
},
methods: {
  handleClickOutside(event) {
    // 子组件的ref假设叫childComp
    const targetElement = this.$refs.childComp.$el;
    if (!targetElement.contains(event.target)) {
      console.log("点击发生在子组件外部");
    }
  },
}

方法二：子组件主动暴露内部DOM节点（适用于多根节点子组件） #

如果你的子组件是Vue3的多根节点组件，$el会失效，这时候可以让子组件把内部需要检测的DOM节点暴露给父组件：

子组件代码（Vue3）： #

<template>
  <div ref="mainElement">...</div>
  <div>其他节点...</div>
</template>

<script setup>
import { ref } from 'vue';
const mainElement = ref(null);
// 暴露内部ref给父组件
defineExpose({ mainElement });
</script>

子组件代码（Vue2）： #

<template>
  <div ref="mainElement">...</div>
</template>

<script>
export default {
  mounted() {
    // 把内部ref挂载到组件实例上
    this.mainElement = this.$refs.mainElement;
  }
}
</script>

父组件调用： #

methods: {
  handleClickOutside(event) {
    // 直接通过子组件实例拿到暴露的DOM节点
    const targetElement = this.$refs.childComp.mainElement;
    if (!targetElement.contains(event.target)) {
      console.log("点击发生在子组件外部");
    }
  },
}

内容的提问来源于stack exchange，提问作者Jean-Loup