vue非父子组件之间的传值 eventbus的应用

最新推荐文章于 2023-02-16 16:26:54 发布

想要飞翔的pig

最新推荐文章于 2023-02-16 16:26:54 发布

阅读量698

点赞数 1

分类专栏：非父子传值 vue 子传父文章标签： vue elementui html

本文链接：https://blog.csdn.net/weixin_53587375/article/details/121658079

版权

vue 同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

子传父

2 篇文章 0 订阅

订阅专栏

非父子传值

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中通过创建一个全局事件总线（global-bus.js）实现组件间的通信。a组件通过$emit发布事件传递头像修改后的值，而b组件则通过$on监听该事件并接收数据，实现头像信息的更新。这种方法提供了一种在不直接依赖父子或兄弟组件关系的情况下进行通讯的解决方案。

摘要由CSDN通过智能技术生成

1.创建一个global-bus.js文件相当于呼叫中心，文件里边这么写

	// 全局呼叫总线
	// 呼叫中心
	// 作用：任何组件之间相互通信
	import Vue from "vue"
	export default new Vue()

2.假设修改头像a组件改完要把这个值给b组件传过去

a组件发布通信事件这么写

import globalBus from "../../assets/js/pass/global-bus";
//第一个参数为事件名和b组件一致就行，第二个参数为要传的参数
 globalBus.$emit("getAccountLogo",res.data)

3.b组件注册通信事件这么写

import globalBus from "./../assets/js/pass/global-bus";
第一个参数为事件名和a组件一致就行，第二个参数为要接收的参数
	globalBus.$on("getAccountLogo",(data)=>{
	//处理函数
        console.log(data,"shshshshhshshshshhhhhhhh");
        this.base =window.URL.createObjectURL(data);
          }),