VU 非父子组件通信

作者：高玉涵
时间：2022.7.28 08:55
博客：blog.csdn.net/cg_i

一、组件通信

 组件关系可分为父子组件通信（通过 props 传递数据）、兄弟组件通信、跨级组件通信。这里我主要介绍跨级组件通信的方法。

1.1 非父子组件通信

 非父子组件一般有两种，兄弟组件和跨多级组件。在 Vue.js 2.x 中，使用一个空的 Vue 实例作为中央事件总线（bus），也就是一个中价。为了更形象地了解它，我们举一个生活中的例子。
 比如你需要租房子，你可能会找户产中介来登记你的需求，然后中介把你的信息发给满足要求的出租者，出租者再把报价和看房时间告诉中介，由中介再转达给你，整个过程中，买家和卖家并没有任何交流，都是通过中间人来传话的。
 或者你最近可能要换房子，你会找房产中介登记你的信息，订阅与你找户需求相关的资讯，一旦有符合你的房子出现时，中介会通知你，并传达你房子的具体信息。
 这两个例子中，你和出租者担任的就是两个跨级的组件，而房产中介就是这个中央事件总线（bus）。比如下面的示例代码：

    
        
        
    
    
        

            {{ message }}
            
        

        
        
    

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

 首先创建一个名为 bus 的空 Vue 实例，里面没有任何内容：然后全局定义了组件 component-a；最后创建 Vue 实例 app，在 app 初始化时，也就是在生命周期 mounted 钩子函数里监听了来自 bus 的事件 on-message，而在组件 component-a 中，点击按钮会通过 bus 把事件 on-message 发出去，此时 app 就会接收到来自 bus 的事件，进而回调里完成自己的业务逻辑。
 这种方法巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级，而且 Vue 1.x 和 Vue 2.x 都适用。如果深入使用，可以扩展 bus 实例，给它添加 data、methods、computed 等选项，这些都是可以公用的，在业务中，尤其是协同开发时非常有用，因为经常需要共享一些通用的信息，比如用户登录的昵称、性别、邮箱等，还有用户的授权 token 等。只需在初始化时 bus 获取一次，任何时间、任何组件就可以从中直接使用了。

二、补充知识：自定义事件

 当子组件需要向父组件传递数据时，就要用到自定义事件。指令 v-on 除了监听 DOM 事件外，还可以用于组件之间的自定义事件。 Vue 中子组件用 $emit() 来触发事件，父组件用 $on() 来监听子组件的事件。父组件也可以直接在子组件的自定义标签上使用 v-on 来监听子组件触发的自定义事件。示例代码如下：

    
        
        
    
    
        

           
总数：{{ total }}
           
        

        
        
    

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
45
46
47
48
49
50
51
52

 上面示例中，子组件有两个按钮，分别实现加 1 和减 1 的效果，在改变组件的 data “counter” 后，通过 $emit() 再把它传递给父组件，父组件用 v-on:increase 和 v-on:reduce（示例使用的是语法糖）。$emit() 方法的第一个参数是自定义事件的名称，例如示例的 increase 和 reduce 后面的参数都是要传递的数据，可以不填或填写多个。

 除了用 v-on 在组件上监听自定义事件外，也可以监听 DOM 事件，这时可以用 .native 修饰符表示监听的是一个原生事件，监听的是该组件的根元素，示例代码如下：

1