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)
}

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

总结

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

您可能感兴趣的文章:

vue3+ts import引入第三方js文件报错的2种解决方法
这篇文章主要给大家介绍了关于vue3+ts import引入第三方js文件报错的2种解决方法,在Vue中通常我们引入一个js插件都是使用npm方式下载然后import使用的,需要的朋友可以参考下
2023-08-08
Vue mixins混入使用解析
如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性，这时使用Vue mixins混入有很大好处，下面就介绍下Vue mixins混入使用方法，需要的朋友参考下吧
2023-02-02
vue使用pdf.js预览pdf文件的方法
在页面进行pdf预览的时候，由于文件不能够打印和下载很难满足客户的需求，接下来通过本文给大家介绍vue使用pdf.js来进行pdf预览,需要的朋友可以参考下
2021-12-12
Vue多层数据结构响应式失效,视图更新失败问题
这篇文章主要介绍了Vue多层数据结构响应式失效,视图更新失败问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
vue父组件调用子组件方法报错问题及解决
这篇文章主要介绍了vue父组件调用子组件方法报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
详解Vue2 无限级分类(添加,删除,修改)
本篇文章主要介绍了详解Vue2 无限级分类(添加,删除,修改) ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
Vue 计算属性 computed
这篇文章主要介绍了Vue 计算属性 computed，一般情况下属性都是放到data中的，但是有些属性可能是需要经过一些逻辑计算后才能得出来，那么我们可以把这类属性变成计算属性，下面我们来看看具体实例,需要的朋友可以参考一下
2021-10-10
vue.js路由跳转详解
这篇文章主要为大家详细介绍了vue.js路由跳转的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
vue模仿网易云音乐的单页面应用
这篇文章主要介绍了vue仿网易云音乐的单页面应用实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-04-04
vue 项目中的this.$get,this.$post等$的用法案例详解
vue.js的插件应该暴露一个install方法。这个方法的第一个参数是vue构造器，第二个参数是一个可选的选项对象，首页要安装axios，本文结合案例代码给大家详细讲解vue 中的this.$get,this.$post等$的用法，一起学习下吧
2022-12-12