首先,我们知道,vue中事件分两种
一种是原生DOM事件,也就是加在原生DOM节点上的事件,如:click blur input等
<button @click="handler">原生DOM事件</button>
methods: {
handler(){
console.log('原生DOM事件');
}
}
另一种是自定义事件,如加在Vue组件上的事件,如:父子组件通信
子组件内
<button @click="$emit('eventOne','eventOne的自定义事件')">Event1组件</button>
父组件内
<event-one @eventOne='handler1'></event-one>
methods: {
handler1(value){
console.log(value);
}
}
但是当我们想在Vue组件上添加原生的DOM事件可以么?如这样
<event-two @click='handler2'></event-two>
经过测试发现是不可以的,因为当事件添加到Vue组件上时,会变成自定义事件,如果想要出发事件的回掉函数,则必须子组件内的$emit调用才可以。
那么该如何给组件添加DOM事件呢?
Vue提供了一个修饰符 native,他可以直接给组件绑定事件监听
<event-two @click.native='handler2'></event-two>
methods: {
handler2(){
console.log('我是EventTwo组件');
}
}
添加之后测试发现,事件被触发了
那么native是如何实现给组件添加事件的呢?
我们对比下面两个组件在最后生成的页面中有哪些不同点
<event-two @click='handler2'></event-two>
<event-two @click.native='handler2'></event-two>
看看有什么区别
发现,添加了native修饰符的组件其实就是在组件的根标签上添加了一个事件监听
结论:
1. native修饰符可以让父组件接收到原生事件, 否则只能接收自定义事件(通过子组件$emit触发)
2. native修饰符只能用在组件上, 不能用在原生标签上