vue中$bus的用法及$emit、$on、$off的使用
vue中 $bus 一般与 $emit、 $on、 $off 连用,一般用在任意组件间的通信,即 $bus 用来传递非父子关系的数据。如两个组件之间传递数据:子组件1子组件21、$emit2、$on注意:$emit 和 $on 的事件必须在一个公共的实例上,才能够触发。3、实例事件实例事件就是在构造器外部调用构造器内部的数据。4、实例在Student组件中提供数据给另一个School组件在Scho
·
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');
},
更多推荐
已为社区贡献1条内容
所有评论(0)