eventBus—兄弟组件传值
两个组件页面a、b,属于兄弟关系,要求实现a向b传值,其传值实现过程如下:
首先在vue 项目中的 main.js
创建一个 vue实例,
export const eventBus = new Vue()
其中在a页面使用 eventBus
,代码如下:
import { eventBus } from "../main";
eventBus.$emit("userName", this.username);
在 b 页面使用 eventBus
,代码如下:
eventBus.$on("userName", (message) => {
console.log(message)
})
缺点
1.使用 eventBus
,当页面刷新后,同样会出现 传值消失的问题,因此应该考虑结合 本地存储 一起使用。
2.eventBus
也有可能出现第一次监听不到数据的情况,这主要涉及了 vue
的声明周期,
尝试解决办法:
(1)eventBus
的 $on
必须在 $emit
之前执行。
(2)vue的生命周期的问题。A页面向B页面传值,B页面先执行created
,A页面执行beforeDestroy
,destroyed
,所以A页面的bus.on
不会自动销毁,记得在B页面的destroyed
生命周期中bus.$off销毁监听