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

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

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

子组件2

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

1、$emit

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

2、$on

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

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

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

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

<template>
    <div class="student">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <button @click="sendStudentName">把学生名给School组件</button>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'曹操',
                sex:'男',
            }
        },
        methods: {
        	//提供发送数据
            sendStudentName(){        
                this.$bus.$emit('hello',this.name)
            }
        },
    }
</script>

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

<template>
    <div class="school">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
                name:'交通学院',
                address:'上海',
            }
        },
        mounted() {
        	//绑定当前事件（这里以hello为例）
            this.$bus.$on('hello',(data)=>{      
                console.log('我是School组件，收到了数据',data)
            })
        },
        //收尾操作，销毁
        beforeDestroy(){        
            this.$bus.$off('hello')  //$off解绑当前组件所用到的事件
        }
    }
</script>

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

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

  methods: {
	bgClick() {
	      bus.$emit('getMsg1')
		  bus.$emit('setIndex1')
	 },
    ...
  },

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

  mounted() {
    bus.$on('getMsg1', this.getMsg)；
    bus.$on('setIndex1', this.setIndex)；
  },
  beforeDestroy() {
    bus.$off('getMsg1')；
    bus.$off('setIndex1')；
  },