vue2中的native修饰符

vue中事件分两种

一种是原生DOM事件，如：click blur input等

举例：

<button @click="handler">原生DOM事件</button>
 
 
methods: {
  handler(){
    console.log('原生DOM事件');
  }
}

另一种是自定义事件，如加在Vue组件上的事件，如：父子组件通信

举例

在父组件内

 <event-one @eventOne='handler1'></event-one>
 
 
methods: {
  handler1(value){
    console.log(value);
  }
}

在子组件内

 <button @click="$emit('eventOne','eventOne的自定义事件')">Event1组件</button>

思考？

当我们在Vue组件中添加原生的DOM事件可以么？如这样

<event-two @click='handler2'></event-two>

发现这样操作是不可行的，因为当事件添加到Vue组件上时，会变成一个自定义事件。子传父则需要调用$emit触发自定义事件并传值。

那么该如何给组件添加原生的DOM事件呢？

Vue2提供了一个修饰符 native，他可以直接给组件绑定事件监听

<event-two @click.native='handler2'></event-two>
 
methods: {
  handler2(){
    console.log('我是EventTwo组件');
  }
}

这样原生dom事件侦听就被触发了

native修饰符原理：添加了native修饰符的组件其实就是在组件的根标签上添加了一个事件监听 。

结论：

1. native修饰符可以让父组件接收到原生事件, 否则只能接收自定义事件(通过子组件$emit触发)

2. native修饰符只能用在组件上, 不能用在原生标签上