Vue 消息订阅与发布 (任意组件间通信)

也可以使用这种方法
Vue全局事件总线(任意组件间通信)

这种比较繁琐

安装命令

npm i pubsub-js

全局使用

rust 复制代码
import PubSub from 'pubsub-js'
Vue.prototype.$pubsub = PubSub

发送消息

Login.vue

rust 复制代码
 methods: {
        login()
        { 
            this.$pubsub.publish('getUserId', '13169463709')
        }
  
     }

接收消息

User.vue

rust 复制代码
created() { 

       this.$pubsub.subscribe('getUserId', (funName,user_id) => {
// this.$pubsub.subscribe('getUserId', (_,user_id) => {
//消息名可以使用_占位
                console.log(user_id)
            
        })
    },
     beforeDestroy() { 
        this.$pubsub.unsubscribe(this.$pubsub)
	//销毁
    }
相关推荐
一 乐12 分钟前
海产品销售系统|海鲜商城购物|基于SprinBoot+vue的海鲜商城系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·后端
艾小码13 分钟前
还在死磕模板语法?Vue渲染函数+JSX让你开发效率翻倍!
前端·javascript·vue.js
炒毛豆14 分钟前
vue3 + antd + print-js 实现打印功能(含输出PDF)
前端·javascript·vue.js
天天向上102415 分钟前
el-table动态添加行,删除行
前端·javascript·vue.js
小王码农记1 小时前
vue2中实现天气预报
前端·javascript·vue.js·echarts
我命由我123451 小时前
Element Plus 组件库 - Select 选择器 value 为 index 时的一些问题
开发语言·前端·javascript·vue.js·html·ecmascript·js
一念一花一世界1 小时前
Arbess从初级到进阶(2) - 使用Arbess+GitLab实现Vue.js项目自动化部署
vue.js·ci/cd·gitlab·arbess
qq. 28040339842 小时前
js 原型链分析
开发语言·javascript·ecmascript
有趣的野鸭2 小时前
JAVA课程十一次实验课程主要知识点示例
java·前端·数据库
格鸰爱童话2 小时前
next.js(二)——从react到next.js
前端·javascript·react.js