Vue对Element中的el-tag添加@click事件无效

我今天又犯了同样的错误，虽然知道Vue对Element中的el-tag添加@click事件无效,但是又忘记了，开始各种搜索，找到原因，通过查阅资料发现官方给定了解答。写个小笔记吧，免得以后不长心。

其实我们在Vue和Element组件库的日常开发中，时常遇到需要给组件添加事件响应的场景。无论是在Vue单文件组件（Single-file-components）中，还是在使用Element UI组件库开发界面时，都会遇到为组件添加点击事件响应的需求。

在使用Vue+Element开发时，我们很容易会遇到这样的问题，就是 @click 事件没有被触发。下面我们一起探究一下这个问题的产生原因以及解决方法。

一、问题的发现

在使用Element UI组件库时，我们有时会需要给 el-tag 标签添加 @click 的点击事件响应，但是当我们尝试这样做时，发现点击事件根本没有被触发。

<el-tag @click="handleTagClick">标签</el-tag>

export default {
  methods: {
    handleTagClick() {
      console.log('tag clicked');
    }
  }
}

上面这段代码看起来应该没有任何问题，但是实际运行时却发现点击事件并没有生效。

那么，这个问题是怎么产生的呢？

二、问题产生的原因

Vue对事件的定义是通过 $on 方法来注册的，而Element组件库中的大部分组件都是由多个子组件组成的，这也就导致了在某些组件上添加事件监听器时，可能并不是我们期望的元素上被绑定了相应的事件。

比如，我们在 el-tag 组件上添加 @click 事件监听器时，实际上会被绑定到内部子元素上，而不是我们期望的 el-tag 标签本身。这个内部子元素是一个 <span> 元素，它包含了 el-tag 组件的全部内容。所以当我们点击 el-tag 标签时，实际上是在点击它内部的 <span> 元素，而不是 el-tag 标签本身。因此，我们需要将 @click 事件绑定到该 <span> 元素上。

那么问题来了，怎么才能获取到该 <span> 元素呢？

三、给出解决方法

Vue提供了一种特殊的修饰符 .native ，可以让我们将事件绑定到组件的根元素上。

修改代码如下：

<el-tag v-on:click.native="handleTagClick">标签</el-tag>

export default {
  methods: {
    handleTagClick() {
      console.log('tag clicked');
    }
  }
}

我们使用 .native 修饰符，将点击事件绑定到了 el-tag 组件的根元素上，即该组件内部的第一个元素 <span> 上。这样一来，当我们点击 el-tag 标签时，就会触发handleTagClick 方法。

上述做法将事件绑定到了组件的根元素上，可以有效地解决 el-tag 组件的点击事件不被触发的问题。

除了使用 .native 修饰符之外，还有其他一些方法可以解决 el-tag 组件的点击事件无效的问题。例如，我们可以通过在 mounted 周期钩子函数中获取该 <span> 元素，然后手动给它添加 click 事件。不过相对来说这种方法比较繁琐，不太建议使用。

四、小结一下

以上就是关于 Vue 对 Element 中的 el-tag 添加 @click 事件无效的问题的详细解决方案，通过使用 .native 修饰符可以轻松解决这个问题。

但需要注意的是，.native 修饰符只对原生的 HTML 元素才有效，而对于自定义组件则无效。

同时，在实际开发中，我们还需要根据需求选择合适的方式来为组件添加事件响应。希望这篇文章能够对大家在 Vue 和 Element 开发中遇到类似问题有所帮助。