在使用事件总线传参时，出现了对应页面的dom元素获取不到最新数据的问题

1.问题说明
我在登录页面，登录成功后将登录角色名传递到另一个组件（layout.vue），然后该数据要在layout.vue文件中使用，结果该数据的值一直是定义时的空
2.上代码
（1）在login.vue组件中，登录成功后发送该事件

// this.$bus.$emit('getLoginRole',this.loginRole)

（2）在layout.vue文件中接收该事件

（3）在dom元素中使用该数据

（4）结果是loginRole值一直为空
3.原因分析
数据是接收到了，但是this. $bus. $on是异步方法，在loginRole发生变化前，dom元素已经加载完了。元素中使用的loginRole值不是最新的。但奇怪的是Vue是具有响应式的，我的数据也是定义在data中的一个字符串，双向数据绑定不应该失效才对。对dom元素加了v-if也没用。
4.总结
因工作原因，没办法一直看这个问题，看了两小时想不出来就暂时放弃，先记录下后续有时间再去想，希望评论区有老哥知道的可以分享一下。
5.我的替代解决办法
首先想到用vuex吧，实现完后发现刷新了数据就没了，所以后面直接把数据保存到localStorage中了

6.后续更新
复查了下问题，在事件emit的组件也对事件进行了销毁，保证只触发一次。后面发现this.$ bus.$on的触发时机可能和外部包裹的函数没关系，只要有事件emit了，他就会触发，执行顺序跑到mounted之前了，另外，为了验证，我后面又在其外面加了定时器延时，也没有延时触发。这可能是事件总线设计的一个bug？总之这个问题先到此为止了

//在接收组件中打印
  mounted() {
    console.log(11111, this.loginRole);
    this.$bus.$on("getLoginRole", (loginRole) => {
      this.loginRole = loginRole;
      console.log(2222, this.loginRole, "role");
    });
 }

然而控制台的打印顺序如下