Vue组件间数据联动实现上传头像后顶部头像同步更新

在以下图片中,我们上传头像成功后需要将顶部的头像一起改变,实现联动,但是这两个又不是同一个组件,怎么才能实现呢?
只有通过任意传的方式实现这一效果,接下来将任意传步骤分享出来.

第一步:
在main.js中设置一个总线 用于组件之间传数据

Vue.prototype.$bus = new Vue();

第二步:
将数据传参数到其他组件(顶部组件)

this.$bus.$emit("sendImg", res.imgUrl);

第三步:
在接收的组件绑定事件,接收头像参数 实现头像联动

this.$bus.$on("sendImg", (url) => {
    this.imgUrl = url; //注意this容易被改指向,所以要用箭头函数
});