聊聊Vue中的native修饰符

首先，我们知道，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修饰符只能用在组件上, 不能用在原生标签上