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")
　　　　}
　　}
})

結果