资讯动态

16 vue2.0 中 PubSub 和$emit组件通信

发布时间:2026/10/15 6:49:57 来源:尧图企业网站定制
PubSub 是“发布-订阅”设计模式也可以作为第三方库使用$emit 是 Vue 中触发组件事件的方法。两者都基于发布-订阅思想但 $emit 主要用于父子组件通信PubSub 更适合任意组件或模块之间的解耦通信。1.PubSub通信范围任意组件、任意模块发布方式this.PubSub.publish订阅方式this.PubSub.subscribe取消订阅this.PubSub.unsubscribe引入main.js引入并挂载全局importPubSubfrompubsub-jsVue.prototype.PubSubPubSub发布this.PubSub.publish(catPath,v);这里的 this.subscribe 不是订阅函数本身而是 subscribe 返回的订阅 token。订阅mounted(){//监听三级分类消息的变化this.subscribethis.PubSub.subscribe(catPath,(msg,val){this.catIdval[val.length-1]this.getCatBrands()})},销毁beforeDestroy(){this.PubSub.unsubscribe(this.subscribe)//销毁订阅},//生命周期 - 销毁之前2.$emit通信范围父子组件子组件发布事件this.$emit(‘update:catelogPath’, v)父组件监听事件update:catelogPath 或 .sync不需要手动取消订阅组件销毁后监听自然失效父组件el-form-item label所属分类propcatelogIdcategory-cascader:catelogPath.synccatelogPath/category-cascader/el-form-item子组件data(){//这里存放数据return{setting:{value:catId,label:name,children:children},categorys:[],paths:this.catelogPath};},watch:{catelogPath(v){// ← 方向①父 → 子this.pathsthis.catelogPath;},paths(v){//// ① 只通知“直接父组件”this.$emit(update:catelogPath,v);//// ② 广播给“任意订阅者”this.PubSub.publish(catPath,v);}},父到子当父组件改了传进来的 catelogPath把新值同步给内部的 paths级联框才会显示出来。子到父用户在级联框里选了分类paths 变了通过 .sync$emit(“update:catelogPath”, v)把值回传给父组件。补充:catelogPath.synccatelogPath等价于:catelogPathcatelogPathupdate:catelogPathcatelogPath $event

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价 →
↑