Vue2中如何给导入的自定义u-button组件添加点击事件

这个问题我之前也碰到过，其实是Vue自定义组件的事件绑定逻辑在搞鬼～

问题原因 #

在Vue2中，给自定义组件（比如你的u-button）绑定@click时，默认是在监听组件自定义事件，而不是原生DOM的点击事件。如果你的u-button组件内部没有主动触发click这个自定义事件，外部绑定的clicked方法自然不会执行。而原生<button>的@click是直接监听DOM事件，所以能正常触发。

两种解决方案 #

方案1：在自定义组件内部转发原生点击事件（推荐）

作为组件开发者，最好主动对外暴露事件，这样组件的API更清晰，也更可靠。修改你的u-button组件模板，给根元素绑定原生点击事件，然后通过$emit触发click事件：

<!-- u-button组件的代码 -->
<template>
  <!-- 假设你的u-button根元素是<button>，如果是其他元素也一样 -->
  <button @click="handleClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 触发外部绑定的click事件，如需传递原生事件对象可写 this.$emit('click', $event)
      this.$emit('click')
    }
  }
}
</script>

这样外部使用u-button时，直接写@click="clicked"就能正常触发方法了，还能灵活传递事件参数。

方案2：使用.native修饰符监听原生事件

如果你只是组件使用者，不想修改u-button的源码，可以直接在绑定事件时加上.native修饰符，让Vue直接监听组件根元素的原生点击事件：

<!-- 使用u-button的组件代码 -->
<template>
  <div>
    <u-button @click.native="clicked">Click me</u-button>
    <button @click="clicked">Native Button</button>
  </div>
</template>

<script>
export default {
  methods: {
    clicked() {
      console.log('按钮被点击了！')
    }
  }
}
</script>

不过要注意：如果u-button的根元素不是你预期的DOM元素，或者组件内部有阻止事件冒泡的逻辑，这个方法可能会失效。所以方案1是更稳妥的长期解决方案。

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