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)
相关推荐
明月清了个风8 分钟前
数据结构与算法学习笔记----贪心区间问题
笔记·学习·算法·贪心算法
因为奋斗超太帅啦18 分钟前
MySQL学习笔记(一)——MySQL下载安装配置
笔记·学习·mysql
aoxiang_ywj1 小时前
【Linux】内核驱动学习笔记(二)
linux·笔记·学习
WhyNot?1 小时前
深度学习入门(三):神经网络的学习
深度学习·神经网络·学习
Moonnnn.2 小时前
运算放大器(五)电压比较器
笔记·学习·硬件工程
揣晓丹2 小时前
JAVA实战开源项目:校园失物招领系统(Vue+SpringBoot) 附源码
java·开发语言·vue.js·spring boot·开源
顽疲2 小时前
从零用java实现 小红书 springboot vue uniapp (11)集成AI聊天机器人
java·vue.js·spring boot·ai
KangkangLoveNLP3 小时前
手动实现一个迷你Llama:使用SentencePiece实现自己的tokenizer
人工智能·深度学习·学习·算法·transformer·llama
kfepiza3 小时前
`accept_ra` 和 `autoconf` 和 `forwarding` 的关系 笔记250404
linux·网络·笔记·tcp/ip·智能路由器·ip·tcp
派小汤3 小时前
Springboot + Vue + WebSocket + Notification实现消息推送功能
vue.js·spring boot·websocket