简介

​ Vue提供了事件绑定的语法糖，我们在标签中可直接使用形如v-on，@click，@focus的形式绑定事件监听器，并且可以使用修饰符对事件进行option设置。本次解释once修饰符以及native修饰符的情况。

once

​ 绑定once的监听器只会触发一次，在第一次触发后该监听器会被remove掉。很简单不多做解释了。

native

​ 我们可以称native为原型绑定。只有使用vue组件时我们会用到这个修饰符。当我们在组件上绑定监听时，我们绑定的是组件定义的监听。以element框架为例，是element提供的组件。它在浏览器解析后是这样的。我们写<el-input @click=“”>时，这click绑定的是element给el-input定义的方法。我们其实把click绑定在了 **div[class=“el-input”]**上了。

与直接在上绑定是不同的，

如果element没给el-input定义click，那么我们这次绑定是无效的。

当我们加上native词缀，<el-input @click.native=“”>这样，我们就把click事件直接绑定在了原型上了，也就是绑定在
input[class=“el-input__inner”]
上了。这是我们绑定的就和input标签的原生监听器是一样的。所以当我们使用组件时需要经常使用原型绑定。

通俗点讲：

就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加**. native**事件是无法触 发的。

<template>
	<div>
        <my-component @click="outClick"></my-component>
    </div>
</template>
<script>
import Vue from 'vue'
    
Vue.component('my-component', {
    template: `<el-button type="primary">InnerButton</el-button>`
})
export default {
	methods: {
       outClick: {
           alert('this is outer')
       } 
    }
}
</script>

此时点击页面中的按钮无任何反应。

添加修饰符：

<template>
	<div>
        <my-component @click.native="outClick"></my-component>
    </div>
</template>
<script>
import Vue from 'vue'
    
Vue.component('my-component', {
    template: `<el-button type="primary">InnerButton</el-button>`
})
export default {
	methods: {
       outClick: {
           alert('this is outer')
       } 
    }
}
</script>

此时点击就会弹窗