Vue 的router-link 标签添加事件
前言在vue 的开发中,对router -link 的使用是不可避免的。有时候,我们需要对router-link 添加事件。正好,前段时间,我就遇到这样的需求。当我写下以下代码时,无论我怎么点都没有反应。<router-link @click="isFinish()">link</router-link>最后,百度了才知道,必须给事件添加修饰符.native 事...
前言
在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 浏览器的控制台输出他们各种的绑定事件结果如下:
可以看出:
- test1当前有个事件,但这个事件是vue 自动添加的;
- test2 有一个事件,该事件是我们通过@click="test()"添加的。
接下来,我们对上面代码进行下面修改:
把test()事件移动到test1。控制台输出:
可以看到,test1添加的test()事件并没有成功,事件还是只有一个。而test2的事件已经成功移除了。
接下来,我们补上修饰符.native
会怎么样呢?
可以看到,test1的通过添加.native
修饰符,成功添加test事件。
更多推荐
所有评论(0)