如何捕获Vue.js外部组件中特定按钮的点击事件？

如果要监听外部组件里firstButtonClick对应的按钮点击，有几种可行的方案，按推荐程度排序：

方案1：修改外部组件，向外触发自定义事件（最优） #

这是最符合Vue组件设计思路的方式，直接在ExternalComponent的按钮点击方法里抛出事件，让父组件能监听到：

先修改ExternalComponent的脚本：

// ExternalComponent.vue
export default {
  methods: {
    firstButtonClick(firstButtonParam) {
      // 保留原有业务逻辑
      // ...
      // 向外触发自定义事件，把参数也传出去
      this.$emit('first-btn-click', firstButtonParam)
    },
    secondButtonClick(secondButtonParam) {
      // 原有逻辑不变
      // ...
      this.$emit('second-btn-click', secondButtonParam)
    }
  }
}

然后在你的MyComponent里监听这个自定义事件：

<!-- MyComponent.vue -->
<ExternalComponent
  :prop1="prop1"
  :prop2="prop2"
  @first-btn-click="handleFirstBtnClick"
/>

<script>
export default {
  methods: {
    handleFirstBtnClick(param) {
      // 这里写你要处理的逻辑
      console.log('外部组件的第一个按钮被点击了，参数：', param)
    }
  }
}
</script>

方案2：用事件委托（不用改外部组件） #

如果没办法修改ExternalComponent的代码，可以在父组件里通过事件委托来判断点击的目标元素：

Vue 2写法 #

<!-- MyComponent.vue -->
<ExternalComponent
  :prop1="prop1"
  :prop2="prop2"
  @click.native="handleCompClick"
/>

<script>
export default {
  methods: {
    handleCompClick(event) {
      // 检查点击的元素是不是目标按钮
      if (event.target.matches('.first-button')) {
        // 处理点击逻辑
        console.log('第一个按钮被点击')
        // 如果需要参数，可尝试从按钮的data属性获取（如果外部组件有设置的话）
        // const param = event.target.dataset.param
      }
    }
  }
}
</script>

Vue 3写法（.native修饰符已移除） #

<!-- MyComponent.vue -->
<ExternalComponent
  :prop1="prop1"
  :prop2="prop2"
  @click="handleCompClick"
/>

<script setup>
function handleCompClick(event) {
  if (event.target.matches('.first-button')) {
    console.log('第一个按钮被点击')
  }
}
</script>

方案3：通过ref绑定DOM事件（不推荐） #

这种方式依赖DOM结构，一旦外部组件的类名或DOM结构变了就会失效，只适合临时应急：

<!-- MyComponent.vue -->
<ExternalComponent
  ref="externalComp"
  :prop1="prop1"
  :prop2="prop2"
/>

<script>
export default {
  mounted() {
    const firstBtn = this.$refs.externalComp.$el.querySelector('.first-button')
    if (firstBtn) {
      firstBtn.addEventListener('click', this.handleFirstBtnClick)
    }
  },
  beforeUnmount() {
    // 记得移除事件监听，避免内存泄漏
    const firstBtn = this.$refs.externalComp.$el.querySelector('.first-button')
    if (firstBtn) {
      firstBtn.removeEventListener('click', this.handleFirstBtnClick)
    }
  },
  methods: {
    handleFirstBtnClick() {
      console.log('第一个按钮被点击')
    }
  }
}
</script>

注意：如果是Vue 3的<script setup>语法，ref需要用defineRef声明，获取DOM的方式类似。

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