用第三方组件或者UI框架会自带自身封装的事件,如keyup,click等,会覆盖原生的事件,从而无法起效果。.native 修饰符就是用来注册元素的原生事件而不是组件自定义事件的。
代码示例:
<el-select v-model="value" ref="select" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
@click.native="getItem(item)"
></el-option>
</el-select>
getItem(item){
console.log(item);
},
在 Vue 2.0 中,为自定义组件绑定原生事件必须使用 .native 修饰符:
<my-component @click.native=“handleClick”>Click Me
从易用性的角度出发,elment-ui对 Button 组件进行了处理,使它可以监听 click 事件.
<el-button @click=“handleButtonClick”>Click Me
但是对于其他组件,还是需要添加 .native 修饰符。