Vue中的eventBus使用

使用 eventBus

在项目入口文件main.js中 加入如下代码

1
2
// EventBus
window.eventBus = new Vue();

这是引入全局变量eventBus

准备两个需要通信的 vue 组件

  1. About.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21


代码中 data 里的 other 值一开始是 old other,这个组件需要另一个组件返回过来的值来进行更新。
如下代码则是取回 键值是postData 的数据

1
2
3
eventBus.$on("postData", data => {
this.other = data;
});
  1. Test.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18


以下代码是在组件销毁之前给键值postData 注入值 new other

1
eventBus.$emit("postData", "new other");

效果

所以效果就是一开始进入 about 页面时 other 值为 old other
进入 test 页面 再返回时 other 值则变成了 new other

# ,

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×