做项目时打算使用eventbus来实现兄弟组件之间相互传值,但是利用console.log发现值已经传到兄弟组件上了,但是却未在组件上渲染,这是什么原因呢?
了解了一下,是生命周期的作用。
vue路由切换时,不是直接销毁前一个组件再加载新组件,而是会先加载新的组件,等新的组件渲染好但是还没有挂载前,销毁旧的组件,之后再挂载新组件,如下方所示:
新组件beforeCreate
↓
新组件created
↓
新组件beforeMount
↓
旧组件beforeDestroy
↓
旧组件destroyed
↓
新组件mounted
但是,在$emit时,$on必须已经创建好,否则将无法监听到事件。
因此假设A->B传数据,若B的$on在created时接收数据,那么A的$emit就得在destroyed生命周期中写。
总结:兄弟组件之间传输数据,接收数据的一方需在传数据的一方销毁之前创建好,挂载的时候更新页面数据。