注：全局或局部注册的组件称为子组件，其中声明的组件名称（如下demo中的child）是一个自定义组件
Demo1-直接给父组件添加事件监听
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="../../vue.js"></script> 7 </head> 8 <body> 9 <div id="root" @click="handleClick"> 10 Child 11 </div> 12 <script> 13 Vue.component('child', { 14 template: '<div>Child</div>' 15 }) 16 17 var vm = new Vue({ 18 el: '#root', 19 methods: { 20 handleClick: function() { 21 alert(1); 22 } 23 } 24 }) 25 </script> 26 </body> 27 </html>
Demo2-使用$emit()发布事件广播，然后父组件可以监听子组件向外触发的事件，并执相应方法即可
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="../../vue.js"></script> 7 </head> 8 <body> 9 <div id="root"> 10 <child @click="handleClick"></child> 11 </div> 12 <script> 13 Vue.component('child', { 14 template: '<div @click="handleChild">Child</div>', 15 methods: { 16 handleChild: function() { 17 this.$emit('click'); 18 } 19 } 20 }) 21 22 var vm = new Vue({ 23 el: '#root', 24 methods: { 25 handleClick: function() { 26 alert(1); 27 } 28 } 29 }) 30 </script> 31 </body> 32 </html>
注：但这种方式是给组件绑定自定义事件，而不是绑定原生事件且要触发2个事件，比较麻烦，此时需要使用demo3的方法
Demo3-直接使用事件修饰符native即可
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="../../vue.js"></script> 7 </head> 8 <body> 9 <div id="root"> 10 <child @click.native="handleClick"></child> 11 </div> 12 <script> 13 Vue.component('child', { 14 template: '<div>Child</div>' 15 }) 16 17 var vm = new Vue({ 18 el: '#root', 19 methods: { 20 handleClick: function() { 21 alert(1); 22 } 23 } 24 }) 25 </script> 26 </body> 27 </html>
摘自：https://www.cnblogs.com/tu-0718/p/11196009.html