下面主要以4个示例Demo演示（示例代码JS引用的Vue CDN），建议小伙伴直接复制示例代码运行查看，
赶时间的小伙伴可直接往下拉，看示例demo4
注：全局或局部注册的组件称为子组件，其中声明的组件名称（如下demo中的child）是一个自定义组件
Demo1-直接给父组件绑定原生事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root" @click="handleClick"> Child </div> <script> Vue.component('child', { template: '<div>Child</div>' }) var vm = new Vue({ el: '#root', methods: { handleClick: function() { alert(1); } } }) </script> </body> </html>
Demo2-如果像demo1直接给自定义组件child绑定原生事件，下面代码会报错，那么给child组件绑定原生事件应该怎么办呢？（先看demo3，后看demo4）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root"> <child @click="handleClick"></child> </div> <script> Vue.component('child', { template: '<div>Child</div>' }) var vm = new Vue({ el: '#root', methods: { handleClick: function() { alert(1); } } }) </script> </body> </html>
Demo3-使用$emit()发布事件广播，然后父组件可以监听子组件向外触发的事件，并执相应方法即可
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root"> <child @click="handleClick"></child> </div> <script> Vue.component('child', { template: '<div @click="handleChild">Child</div>', methods: { handleChild: function() { this.$emit('click'); } } }) var vm = new Vue({ el: '#root', methods: { handleClick: function() { alert(1); } } }) </script> </body> </html>
注：但这种方式是给组件绑定自定义事件，而不是绑定原生事件且要触发2个事件，比较麻烦，此时需要使用demo4的方法
Demo4-直接使用事件修饰符native即可
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root"> <child @click.native="handleClick"></child> </div> <script> Vue.component('child', { template: '<div>Child</div>' }) var vm = new Vue({ el: '#root', methods: { handleClick: function() { alert(1); } } }) </script> </body> </html>