vue使用eventBus遇到数据不更新的问题及解决
更新时间：2024年08月31日 09:22:12 作者：明月松江
这篇文章主要介绍了vue使用eventBus遇到数据不更新的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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)
}这样写，在旧组件销毁的时候新的组件拿到旧组件传来的值，然后在挂载的时候更新页面里的数据。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
众所周知组合式API是一系列API的集合,使我们可以使用函数而不是声明选项的方式书写Vue组件,这篇文章主要给大家介绍了关于Vue组合式API的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章主要为大家介绍了手写vue2下拉菜单dropdown组件实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
vue的el-select绑定的值无法选中el-option问题及解决
这篇文章主要介绍了vue的el-select绑定的值无法选中el-option问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家介绍了Vue2 Observer实例dep和闭包中dep区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
Vue 实时监听窗口变化 windowresize的两种方法
这篇文章主要介绍了Vue 实时监听窗口变化 windowresize的两种方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了Vue官方文档梳理之全局配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最近发现好多小伙伴在面试的过程中会问到vue如何使用less和scss，所以下面这篇文章主要给大家介绍了关于Less在Vue中的使用方法,需要的朋友可以参考下2023-10-10
vue中对数组的元素进行删除,以前一直以为这个方法是vue中特有的,后来百度之后才知道原来是js的一个写法,下面这篇文章主要给大家介绍了关于Vue中splice()方法对数组进行增删改等操作的实现方法,需要的朋友可以参考下2023-05-05
本篇文章主要介绍了Vue学习笔记进阶篇之函数化组件探究，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了vue中使用自定义指令实现按钮权限展示功能，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-04-04
最新评论