vue中$bus的用法及$emit、$on、$off的使用
创始人
2024-03-23 05:01:01
0

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组件


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


其中,$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');},

相关内容

热门资讯

原创 吉... 12月26日,欣旺达公告自家子公司欣旺达动力被吉利旗下的威睿电动汽车告了,索赔金额高达23.14亿元...
无惧苹果起诉,爆料人再发iPh... IT之家 12 月 27 日消息,据科技媒体 Phone Arena 昨天报道,在今年 7 月被苹果...
因电芯质量问题索赔23.14亿... 齐鲁晚报·齐鲁壹点 郭辰昊 12月26日,欣旺达发布公告称,子公司欣旺达动力于2025年12月25日...
民族团结进步促进法草案等重要法... 原标题:三部重要法律案将提请2026年全国人代会审议 十四届全国人大常委会第十九次会议12月27日表...
改革开放再深化,激活制度创新“... 改革开放再深化,激活制度创新“关键一招” ——聚焦省委经济工作会议④ 刚刚结束的省委经济工作会议提出...
“理论+百姓+文艺” 北京城市... “从城市绿心的生态蝶变到社区服务的温度升级,党的二十届四中全会精神正悄然融入城市副中心市民的日常生活...
咖啡因风波中的霸王茶姬,“将对... 因为产品咖啡因含量问题,现制茶饮品牌霸王茶姬(NASDAQ.CHA)再次登上热搜。 12月26日,霸...
丰田UA80八速变速箱存设计缺... 据汽车媒体CarScoops,丰田近期遭遇两起集体诉讼,核心指控其广泛使用的UA80八速自动变速箱存...
搭建温暖桥梁:湖南芙蓉律师事务... 这个冬天,湖南芙蓉律师事务所想搭一座“温暖桥梁”——发起“橙”意满满助农公益捐赠活动,计划捐赠20万...