vue中$bus的用法及$emit、$on、$off的使用

vue中 $bus 一般与 $emit、 $on、 $off 连用，一般用在任意组件间的通信，即 $bus 用来传递非父子关系的数据。
如两个组件之间传递数据：
子组件1

this.$bus.$emit("hello",param);
1

子组件2

this.$bus.$on("hello",(param)=>{
});
1
2

1、$emit

• $emit(‘自定义事件名’，要传递的数据)；
• 触发当前实例上的自定义事件，要传递的数据会传给监听器；

2、$on

• $on(‘自定义事件名’，callback)；
• 监听当前实例上自定义事件，callback回调$emit要传递的数据；

注意：$emit 和 $on 的事件必须在一个公共的实例上，才能够触发。

3、实例事件
实例事件就是在构造器外部调用构造器内部的数据。

4、实例
在Student组件中提供数据给另一个School组件

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

在School组件中使用事件总线，接收数据。School组件想接收数据，则在School组件中给 $bus绑定事件，事件的回调则留在School组件自身。

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

其中，$off 解绑当前组件所用到的事件。

5、小结
$emit写在子组件 / 兄弟组件：

  methods: {
	bgClick() {
	      bus.$emit('getMsg1')
		  bus.$emit('setIndex1')
	 },
    ...
  },
1
2
3
4
5
6
7

$on写在父组件 / 兄弟组件：

  mounted() {
    bus.$on('getMsg1', this.getMsg)；
    bus.$on('setIndex1', this.setIndex)；
  },
  beforeDestroy() {
    bus.$off('getMsg1')；
    bus.$off('setIndex1')；
  },
1
2
3
4
5
6
7
8