vue使用eventBus遇到数据不更新的问题及解决

修炼自己幸福一生

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

今天在项目的一个组件需要向兄弟组件传数据，所以想到了使用eventBus。

我先建立了一个eventBus.js

代码如下：

1. import Vue from 'vue'
   
2. const eventBus = new Vue()
   
3. export default eventBus

复制代码

在需要往外传值的组件中引用eventBus.js

1. import eventBus from '@/assets/js/eventBus'

复制代码

在方法中使用$emit往外传值

1. eventBus.$emit('dataUpdate',data)

复制代码

在需要接受值的兄弟组件中再次引用eventBus.js

1. import eventBus from '@/assets/js/eventBus'

复制代码

在created()周期函数里使用$on来接受其他组件传来的值

1. created(){
   
2.   eventBus.$on('dataUpdate', item => {
   
3.     this.name = item
   
4.     console.log(this.name)
   
5.   })
   
6. }

复制代码

然后我就遇到了一个奇怪的事情

console.log可以打印出this.name的值，但是页面上的name没有任何变化，还是data()函数里的初始值。
通过查询资料得知原来 vue路由切换时，会先加载新的组件，等新的组件渲染好但是还没有挂载前，销毁旧的组件，之后挂载新组件
如下所示：

1. 新组件beforeCreate
   
2.         ↓
   
3. 新组件created
   
4.         ↓
   
5. 新组件beforeMount
   
6.         ↓
   
7. 旧组件beforeDestroy
   
8.         ↓
   
9. 旧组件destroyed
   
10.         ↓
    
11. 新组件mounted

复制代码

注意

在

1. $emit

复制代码

时，必须已经

1. $on

复制代码

，否则将无法监听到事件。
所以正确的写法应该是在需要接收值的组件的

1. created

复制代码

生命周期函数里写

1. $on

复制代码

，在需要往外传值的组件的

1. destroyed

复制代码

生命周期函数函数里写：

1. destroyed(){
   
2.   eventBus.$emit('dataUpdate',data)
   
3. }

复制代码

这样写，在旧组件销毁的时候新的组件拿到旧组件传来的值，然后在挂载的时候更新页面里的数据。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/326749qie.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！