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>
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>