native

作用 : 对于组件，用于监听原生事件，而不是组件内部使用 vm.$emit 触发的事件

如果封装的组件, 是否可以绑定 click 事件, 得看子组件内部有没有触发 click 事件(原生事件)
如果子组件内部没有触发 click 事件, 可以在父组件上加 .native 修饰符, 其作用是将 click 绑定给子组件的根标签

总结: 给组件绑定原生事件后, 如果没触发就加 .native

注意事项: 只有原生事件 (click mouseenter mouseleave...) 才需要加 .native

父组件:

<template>
  <div>  
   <!-- <el-button></el-button> 内部触发了 click 事件 -->
   <!-- <el-dropdown-item></el-dropdown-item> 内部没有触发 click 事件 -->
   
   <son @click.native="sonClick" />
   
  </div>
</template>

<script>
import son from './son.vue'
export default {
  components: {
    son
  },
  methods: {
    sonClick() {
      console.log('son 被点了')
    }
  }
}
</script>

子组件

<template>
  <!-- 如果没有使用 native , 子组件内部使用 `vm.$emit`  才能触发事件 --> 
  <!-- <div @click="$emit('click')"> --> 
  <div>
    我是 SON 组件
  </div>
</template>

native 修饰符的作用及使用方法

native