vue 监听组件原生事件_使用vue中的修饰符.native
vue中.native是什么？
.native主要用于监听组件根元素的原生事件,主要是给自定义的组件添加原生事件。官方对.native修饰符的解释为：有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。例如：
<my-component v-on:click.native="doTheThing"></my-component>例子 1：
给普通的标签加事件，然后加native是无效的
<div id="app">
<a href="#" v-on:click.native="clickFun">click me</a>
</div>new Vue({
el: '#app',
methods: {
clickFun: function(){
console.log("message: success")
}
}
})例子2：
给某个组件的根元素上监听一个事件，之后添加 .native 修饰符就会起作用了。例如：
<div id="app">
<my-component v-on:click.native="clickFun"></my-component>
</div>Vue.component('my-component', {
template: `<a href='#'>click me</a>`
})
new Vue({
el: '#app',
methods: {
clickFun: function(){
console.log("message: success")
}
}
})本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！