总结一下 vue2 组件之间的通信

start

• 最近在学习 vue3，在学习 vue3 的 之前。先总结一下，vue2 中的组件之间的通信；

以下示例皆为 vue2

1.父组件传值给子组件，利用 props

父组件 app.vue

​

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

子组件 boxA.vue

​

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2.子组件和父组件通信 $emit

父组件 app.vue

​

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

子组件 boxA.vue

​

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3. 跨多级组件通信

/*新建一个Vue实例作为中央事件总线*/
let event = new Vue()
​
/*监听事件*/
event.$on('eventName', (val) => {
  //......do something
})
​
/*触发事件*/
event.$emit('eventName', 'this is a message.')
1
2
3
4
5
6
7
8
9
10

4.跨多级组件数据通信

vuex4.

5. 父-》子-》孙 三个层级之间的组件通信 $attrs $listeners

有这么一个场景，组件 A 中有组件 B，组件 B 中有 C。AC 之间通信怎么办？

• 使用父子通信，B 组件中会有很多冗余代码。
• 使用事件总线，不太利于管理；
• 使用 vuex，有点大材小用；

在 vue2.4 版本之后，添加了这么几个属性：

• $attrs
• $listeners

$attrs

• vm 上的属性。所以我们可以直接在组件中，this.$attrs打印出来；
• 2.4.0 新增的属性；
• 简单理解就是一个对象。所有父组件传递给子组件的值，当子组件没有用 prop 属性接收，就会存储在this.$attrs中。（class 和 style 除外）

$listeners

• vm 上的属性。所以我们可以直接在组件中，this.$listeners打印出来；
• 2.4.0 新增的属性；
• 简单理解就是一个对象。所有父组件给子组件绑定到事件会存储在this.$listeners中，（不含 .native 修饰器的）

有什么用？

想象我们的场景：

0. A 组件和 C 组件通信；
1. A 传递数据给 B,绑定事件到 B 上。
2. 可以在 B 中通过 this.$attrs 和 this.$listeners 拿到数据和事件
3. 一起传递给 C 组件。

例如：

父组件 app.vue

​

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

子组件 boxA.vue

​

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

另外说个其他的小 tips

• 没有被 父组件传递给子组件的值，如果没有被 props 接受。 默认会展示在 html 的标签上

可使用 inheritAttrs: false, 隐藏