https://blog.csdn.net/qq_29468573/article/details/80771625
除了用v-on在组件上监听自定义事件外,也可以监听DOM事件,这时可以用.native修饰符表示监听的是一个原生事件,监听的是该组件的根元素,示例如下:
<my-component v-on:click="handleClick"></my-component> //不会触发
<my-component v-on:click.native="handleClick"></my-component> //触发handleClick
<body>
<div id="app">
<my-component @click="outClick"></my-component> <!-- 点击无弹框,事件绑定失败 -->
<my-component @click.native="outClick"></my-component> <!--点击有弹框,事件绑定成功--->
</div>
<script>
Vue.component('my-component',{
template:'<button>点击事件</button>'
})
var app=new Vue({
el:'#app',
methods:{
outClick(){
alert('this is outer');
}
}
})
</script>
</body>
总结:
在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加“”.native“”事件是无法触发的。
可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签,并且该修饰符对普通HTML标签是没有任何作用的。