.native
- 在vue中可以使用v-on对原生dom进行事件绑定,但是若是想在组件上绑定事件使用v-on是不起作用的,需要加.native修饰符;
- 原理就是将组件转化为普通标签,使其在事件绑定能够正常使用;
[1]elementui组件
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="logout">
注销
</el-dropdown-item>
</el-dropdown-menu>
<el-input
v-model="inputText"
:placeholder="inputOption.placeholder"
clearable
@keyup.enter.native="searchInput"
@input="inputChange"
@clear="inputClear">
</el-input>
[2]自己封装的组件
// 子组件
<template>
<div>哈哈哈哈</div>
</template>
// 父组件
<script>
import emty from './emty.vue'
export default {
components: {
emty
},
methods: {
test(){
console.log('我被执行了')
},
}
</script>
<template>
<emty @click='test'/>
<!-- 点击哈哈哈不会触发test方法->
</template>
<template>
<emty @click.native='test'/>
<!-- 点击哈哈哈会触发test方法->
</template>