vue中使用eventBus遇到数据不更新的问题

302 阅读1分钟

做项目时打算使用eventbus来实现兄弟组件之间相互传值,但是利用console.log发现值已经传到兄弟组件上了,但是却未在组件上渲染,这是什么原因呢?

了解了一下,是生命周期的作用。

vue路由切换时,不是直接销毁前一个组件再加载新组件,而是会先加载新的组件,等新的组件渲染好但是还没有挂载前,销毁旧的组件,之后再挂载新组件,如下方所示:

    新组件beforeCreate
            ↓
    新组件created
            ↓
    新组件beforeMount
            ↓
    旧组件beforeDestroy
            ↓
    旧组件destroyed
            ↓
    新组件mounted

但是,在$emit时,$on必须已经创建好,否则将无法监听到事件。

因此假设A->B传数据,若B的$on在created时接收数据,那么A的$emit就得在destroyed生命周期中写。

总结:兄弟组件之间传输数据,接收数据的一方需在传数据的一方销毁之前创建好,挂载的时候更新页面数据。