Vue中，如果我们希望直接给子组件添加一个原生事件，就得使用.native修饰符，如同：@click.native="...xxx"。当我们希望组件绑定事件的时候更加优雅以及不使用.native修饰符的时候，就可以使用如下方法

1. 添加原生事件

1.1 父组件

  2. <template>
  3.   <div>
  4.     点击事件
  5.     <demo-button @click="change"></demo-button>
  6.   </div>  
  7. </template>
  9. <script>
  10. import demoButton form 'xxx'
  11. export default {
  12.   components:{
  13.     demoButton
  14.   },
  15.   methods:{
  16.     change(e) {
  17.       console.log("点击了",e)
  18.     }
  19.   }
  20. }  
  21. </script>

1.2 子组件

  1. <template>
  2.   <div>
  3.     <button @click="clickBtn"></button>
  4.   </div>
  5. </template>
  6. <script>
  7.  export default{
  8.   methods:{
  9.     clickbtn(e){
  10.         // 触发父组件传下来的自定义事件 click
  11.        this.$emit('click',e)
  12.     }
  13.   }
  14. }
  15. </script>

1.3 注意

  1. 该方法不止针对于click事件，例如change等事件也是有效的

参考文章

  1. CSDN- 嘤嘤怪呆呆狗-vue自定义组件绑定事件