Vue3中移除.native后如何处理第三方组件的点击事件？

在Vue3移除.native修饰符后，针对无源码的第三方组件，你可以通过以下几种方式处理点击事件：

• 直接使用@click绑定（推荐）
  Vue3中，若第三方组件没有显式声明click事件（即未在emits选项中定义），组件上的@click会默认绑定到其根DOM元素上，效果等同于Vue2的@click.native。写法如下：

  <some-other-component @click="doSomething" />
  

• 事件委托（适用于组件根元素非目标点击区域的场景）
  如果第三方组件的根元素不是你需要监听点击的区域，或者组件内部有多层嵌套结构，可以在父容器上通过事件委托来监听：

  <div @click="handleComponentClick">
    <some-other-component />
  </div>
  

  对应的处理函数：

  function handleComponentClick(event) {
    // 判断点击目标是否属于第三方组件内部
    if (event.target.closest('some-other-component')) {
      this.doSomething()
    }
  }
  

• 通过ref手动绑定DOM事件
  利用ref获取组件实例，直接给其根DOM元素添加原生事件监听，这种方式更灵活，适合需要精准控制的场景：

  <some-other-component ref="thirdPartyComp" />
  

  组件逻辑部分：

  import { ref, onMounted, onBeforeUnmount } from 'vue'
  
  export default {
    setup() {
      const thirdPartyComp = ref(null)
      const doSomething = () => {
        // 点击事件逻辑
      }
  
      onMounted(() => {
        thirdPartyComp.value.$el.addEventListener('click', doSomething)
      })
  
      onBeforeUnmount(() => {
        thirdPartyComp.value.$el.removeEventListener('click', doSomething)
      })
  
      return {
        thirdPartyComp,
        doSomething
      }
    }
  }
  

内容的提问来源于stack exchange，提问作者coure2011