作者：wuming66486 | 来源：互联网 | 2023-08-11 12:24
题目描述
《Vue.js实战》里面的关于组件通信的章节，有一篇关于介绍自定义事件的。子组件的自定义事件通过$emit通知父组件，而父组件可通过
监听子组件的自定义事件。虽然知道，是这样的一个机制，但是看到下面的代码之后就还是没理解实质。希望大神能够解释一下，最好形象一些。
题目来源及自己的思路
《Vue.js实战》第7章 7.3节组件通信 7.3.1 自定义事件
看到这里我是理解成这样：自定义标签my-component定义了两个自定义事件increase和reduce，这两个事件的事件处理程序都是handleGetTotal，所以我就去了子组件内查这个处理程序，但是发现子组件的methods里面没有，只有handleIncrease和handleReduce，这里感觉困惑。然后想这个是父组件通过
监听这两个事件，所以事件处理程序handleGetTotal应该是父组件提供？然后看到确实在父组件的methods里面找到了。所以，虽然increase和reduce是子组件自已定义的事件，但是对应的处理程序（这些事件都干些什么）一定是父组件提供？这个理解对么？
然后再看详细的函数内容:
1
2
3
4
| handleGetTotal: function(total) {
this.total = total;
console.log(this); //Vue
} |
function(total)这里的total看起来似乎是从子组件那边传过来的，似乎是通过
1
2
| this.$emit('increase', this.counter);
this.$emit('reduce', this.counter); |
但是，到底是不是这样传的？如果是这样传的 this.counter 作为子组件的数据怎么和function(total)这里的total对应起来的？我测试function(total)这里的参数是任意字符串都可以，所以对应起来：
1
2
3
4
5
6
| @increase="handleGetTotal"
this.$emit('increase', this.counter);
@reduce="handleGetTotal"
this.$emit('reduce', this.counter); |
this.counter作为子组件处理之后的数据又回传给父组件提供的函数handleGetTotal。是不是这样的呢？
如果是这样的话，前面的疑问似乎就是解了？
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| |
京公网安备 11010802041100号