1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 </head> 7 <body> 8 <div id="app"> 9 <child @click="handleClick"></child><!--这个click为自定义事件--> 10 </div> 11 12 <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 --> 13 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 14 <script> 15 Vue.component('child', { 16 template: '<div @click="handleChildClick">child</div>', 17 methods: { 18 handleChildClick: function() { 19 alert('child click'); 20 this.$emit('click');//绑定一个自定义click事件 21 } 22 } 23 }) 24 var app = new Vue({ 25 el: '#app', 26 methods: { 27 //父组件接收到绑定的handleClick事件 28 handleClick: function() { 29 alert('click'); 30 } 31 } 32 }) 33 //整体先弹出child click,再弹出click 34 </script> 35 </body> 36 </html>
添加.native表示绑定原生事件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 </head> 7 <body> 8 <div id="app"> 9 <child @click.native="handleClick"></child><!--添加.native表示绑定原生事件--> 10 </div> 11 12 <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 --> 13 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 14 <script> 15 Vue.component('child', { 16 template: '<div>child</div>', 17 }) 18 var app = new Vue({ 19 el: '#app', 20 methods: { 21 handleClick: function(){ 22 alert('click') 23 } 24 } 25 }) 26 //弹出click 27 </script> 28 </body> 29 </html>