Vue_事件修饰符_native

.native

• 在vue中可以使用v-on对原生dom进行事件绑定，但是若是想在组件上绑定事件使用v-on是不起作用的，需要加.native修饰符；
  • 原理就是将组件转化为普通标签，使其在事件绑定能够正常使用；

[1]elementui组件

<!--需要加.native修饰符才可以触发 -->
<el-dropdown-menu slot="dropdown">
   <el-dropdown-item @click.native="logout">
      注销
   </el-dropdown-item>
</el-dropdown-menu>

<!-- input,clear是elementui内部绑定的事件，所以不需要加修饰符便可以正常使用；keyup是dom原生事件，若是想在组件上进行事件绑定，需要加修饰符 -->
<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>