vue中的.native修饰符

Posted 2023-04-04

参考技术A 如果你想在某个组件的根元素上绑定事件，直接使用 @click=''function' 是不生效的，我们可以添加.native修饰符 @click.native=''function''。上demo:

测试下发现这里的点击事件 handlerFun 没有触发，现在加上 .native,

额(⊙﹏⊙)，加的事件多了点，多测测没毛病，从demo发现
1、父级 click 加 .native 了确实触发了， mouseover 没加没触发
2、子级上也有 click，先触发了子级上的 click 函数，然后触发了父级的 click。
关于 .native 官网解释：

如果子组件是咱们自己写的，想父组件用他时不加.native 也能用还有一种方法 v-on="$listeners"，

可以发现都触发了。
vm.$listeners 的官方解释：

其实修饰符还有很多
如：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.keyCode | keyAlias - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 passive: true 模式添加侦听器
参考：
https://vuejs.bootcss.com/api/#v-on

Vue.js中.native修饰符

.native修饰符

官方对.native修饰符的解释为：

　　有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。例如：

<my-component v-on:click.native="doTheThing"></my-component>

 

---

 

 

简单点理解就是：

• 给普通的HTML标签监听一个事件，之后添加 .native 修饰符是不会起作用的。例如：

HTML代码 

<div id="app">
　　<a href="#" v-on:click.native="clickFun">click me</a>
</div>

 JavaScript代码 

new Vue({
　　el: \'#app\',
　　methods: {
　　　　clickFun: function(){
　　　　　　console.log("message: success")
　　　　}
　　}
})

结果

• 给某个组件的根元素上监听一个事件，之后添加 .native 修饰符就会起作用了。例如：

HTML代码

<div id="app">
　　<my-component v-on:click.native="clickFun"></my-component>
</div>

JavaScript代码 

Vue.component(\'my-component\', {
　　template: `<a href=\'#\'>click me</a>`
})
new Vue({
　　el: \'#app\',
　　methods: {
　　　　clickFun: function(){
　　　　　　console.log("message: success")
　　　　}
　　}
})

结果