Vue 的router-link 标签添加事件

前言

在vue 的开发中，对router -link 的使用是不可避免的。有时候，我们需要对router-link 添加事件。正好，前段时间，我就遇到这样的需求。当我写下以下代码时，无论我怎么点都没有反应。

  <router-link @click="isFinish()">link</router-link>

最后，百度了才知道，必须给事件添加修饰符.native 事件才能起效。

为什么？

首先我们来看看官方文档对.native的描述：

也就是说，如果我们想要在组件名标签（<base-input>）添加一个原生事件（这里是 click 事件）。那么我们就必须给原生事件添加修饰符.native ，否则这个事件就会不发生效。

为什么需要这样呢？

要进一步理解，首先我们要观察到官方文档那句话两个关键字段：“组件根元素”和“原生事件”。

什么是“组件根元素”？

结合官方文档给出的代码示例。我们可以确定“组件根元素”是`<base-input>`。也就是我上面所说的组件名标签了。

这组件名标签是什么？

组件的名字，在父组件中使用子组件时，把子组件的名字当作标签名来使用，添加到父组件中。

那抛开组件名的身份再看呢？你就会很容易想到自定义标签了。没错，本质上就是个自定义标签。

“原生事件”是什么？

Vue 的基础是HTML，这里的原生指的就是HTML了。“原生事件”也就是HTML自带的事件。

结合以上两点的分析，修饰符.native 得作用可以归结为：让自定义标签上的事件能跟在原生标签上的表现一致。直白但不准确的讲，就是.native 让自定义标签被识别为原生HTML标签。

通过代码来查看一下：

以router-link 标签为例，上面代码定义一个router-link 标签，ID 为test1;一个原生HTML 标签 ID 为 test2。

然后用chrome 浏览器的控制台输出他们各种的绑定事件结果如下：

可以看出：

1. test1当前有个事件，但这个事件是vue 自动添加的；
2. test2 有一个事件，该事件是我们通过@click="test()"添加的。

接下来，我们对上面代码进行下面修改：

把test()事件移动到test1。控制台输出:

可以看到，test1添加的test()事件并没有成功，事件还是只有一个。而test2的事件已经成功移除了。

接下来，我们补上修饰符.native 会怎么样呢？

可以看到，test1的通过添加.native修饰符，成功添加test事件。