Vue学习笔记-消息订阅与发布(pubsub)

消息订阅与发布(pubsub)

  1. 一种组件间的通信方式,适用于任意组件间通信

  2. 使用步骤:

    1. 安装pubsub第三方库npm i pubsub-js

    2. 在组件中引入import pubsub from 'pubsub-js'

    3. 数据接收方(A组件):A组件订阅消息,并且订阅消息的回调函数留在A组件自身

    javascript 复制代码
    methods:{
    	/*
    	自定义回调函数,第一个参数为订阅的消息名称,第二个参数为消息发布方发布的数据
    	*/
    	callFun(msgName,data){
    		...
    	}
    ]
    mounted(){
    	/*订阅消息,第一个参数为自定义的消息名称,
    	第二个参数为自定义的回调函数
    	(如果写匿名函数,需要写成箭头函数,这样能保证this对象是Vue实例)
    	返回值为订阅消息的id,将其赋给Vue实例,方便以后销毁
    	*/
    	this.pubid = pubsub.subscribe('msgName',this.callFun)
    },
    beforeDestory(){
    	//建议在组件销毁时取消订阅
    	pubsub.unsubscribe(this.pubid)
    }
    1. 数据传递方(B组件):B组件发布消息-->在需要传递数据的函数中添加如下代码:
    javascript 复制代码
    pubsub.publish('msgName',data)
相关推荐
一笑code5 分钟前
美团社招一面
前端·javascript·vue.js
心宽体胖连壮实40 分钟前
记录一次 MarchingSquaresJS 使用经历
vue.js
每次的天空40 分钟前
Android学习总结之Java篇(一)
android·java·学习
黑不拉几的小白兔1 小时前
risc-V学习日记(4):RV32I指令集
学习·risc-v
Monly211 小时前
vue报错:Loading chunk * failed,vue-router懒加载出错问题。
前端·javascript·vue.js
AAAA劝导tx1 小时前
List--链表
数据结构·c++·笔记·链表·list
春眠不觉晓♞2 小时前
使用多线程快速向Excel中快速插入一万条数据案例
java·学习·excel
愚润求学2 小时前
【Linux】进程优先级和进程切换
linux·运维·服务器·c++·笔记
薛定谔的猫22 小时前
Composition API的深入理解与最佳实践
前端·vue.js
parade岁月2 小时前
TypeScript 全局类型声明文件规范性分析与归纳
前端·vue.js·typescript