vue中 $bus 一般与 $emit、 $on、 $off 连用,一般用在任意组件间的通信,即 $bus 用来传递非父子关系的数据。
如两个组件之间传递数据:
子组件1
this.$bus.$emit("hello",param);
子组件2
this.$bus.$on("hello",(param)=>{
});
1、$emit
2、$on
注意:$emit 和 $on 的事件必须在一个公共的实例上,才能够触发。
3、实例事件
实例事件就是在构造器外部调用构造器内部的数据。
4、实例
在Student组件中提供数据给另一个School组件
学生姓名:{{name}}
学生性别:{{sex}}
在School组件中使用事件总线,接收数据。School组件想接收数据,则在School组件中给 $bus绑定事件,事件的回调则留在School组件自身。
学校名称:{{name}}
学校地址:{{address}}
其中,$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');},