我要评论vue使用eventbus遇到数据不更新问题
今天在项目的一个组件需要向兄弟组件传数据，所以想到了使用eventbus。
我先建立了一个eventbus.js
代码如下：
import vue from 'vue' const eventbus = new vue() export default eventbus
在需要往外传值的组件中引用eventbus.js
import eventbus from '@/assets/js/eventbus'
在方法中使用$emit往外传值
eventbus.$emit('dataupdate',data)在需要接受值的兄弟组件中再次引用eventbus.js
import eventbus from '@/assets/js/eventbus'
在created()周期函数里使用$on来接受其他组件传来的值
created(){
eventbus.$on('dataupdate', item => {
this.name = item
console.log(this.name)
})
}然后我就遇到了一个奇怪的事情
console.log可以打印出this.name的值，但是页面上的name没有任何变化，还是data()函数里的初始值。
通过查询资料得知原来 vue路由切换时，会先加载新的组件，等新的组件渲染好但是还没有挂载前，销毁旧的组件，之后挂载新组件
如下所示：
新组件beforecreate
↓
新组件created
↓
新组件beforemount
↓
旧组件beforedestroy
↓
旧组件destroyed
↓
新组件mounted注意
在$emit时，必须已经$on，否则将无法监听到事件。
所以正确的写法应该是在需要接收值的组件的created生命周期函数里写$on，在需要往外传值的组件的destroyed生命周期函数函数里写：
destroyed(){
eventbus.$emit('dataupdate',data)
}这样写，在旧组件销毁的时候新的组件拿到旧组件传来的值，然后在挂载的时候更新页面里的数据。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论