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

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);
          }),

4.项目中使用

global-bus.js

在这里插入图片描述

修改头像页面

在这里插入图片描述

展示头像页面

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_53587375/article/details/121658079