vue使用eventBus遇到數(shù)據(jù)不更新的問題及解決
更新時間：2024年08月31日 09:22:12 作者：明月松江
這篇文章主要介紹了vue使用eventBus遇到數(shù)據(jù)不更新的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue使用eventBus遇到數(shù)據(jù)不更新問題
今天在項目的一個組件需要向兄弟組件傳數(shù)據(jù)，所以想到了使用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()周期函數(shù)里使用$on來接受其他組件傳來的值
created(){
eventBus.$on('dataUpdate', item => {
this.name = item
console.log(this.name)
})
}然后我就遇到了一個奇怪的事情
console.log可以打印出this.name的值，但是頁面上的name沒有任何變化，還是data()函數(shù)里的初始值。
通過查詢資料得知原來 vue路由切換時，會先加載新的組件，等新的組件渲染好但是還沒有掛載前，銷毀舊的組件，之后掛載新組件
如下所示：
新組件beforeCreate
↓
新組件created
↓
新組件beforeMount
↓
舊組件beforeDestroy
↓
舊組件destroyed
↓
新組件mounted注意
在$emit時，必須已經(jīng)$on，否則將無法監(jiān)聽到事件。
所以正確的寫法應該是在需要接收值的組件的created生命周期函數(shù)里寫$on，在需要往外傳值的組件的destroyed生命周期函數(shù)函數(shù)里寫：
destroyed(){
eventBus.$emit('dataUpdate',data)
}這樣寫，在舊組件銷毀的時候新的組件拿到舊組件傳來的值，然后在掛載的時候更新頁面里的數(shù)據(jù)。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
眾所周知組合式API是一系列API的集合,使我們可以使用函數(shù)而不是聲明選項的方式書寫Vue組件,這篇文章主要給大家介紹了關于Vue組合式API的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
手寫實現(xiàn)vue2下拉菜單dropdown組件實例
這篇文章主要為大家介紹了手寫vue2下拉菜單dropdown組件實例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
vue的el-select綁定的值無法選中el-option問題及解決
這篇文章主要介紹了vue的el-select綁定的值無法選中el-option問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue2?Observer實例dep和閉包中dep區(qū)別詳解
這篇文章主要為大家介紹了Vue2?Observer實例dep和閉包中dep區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
Vue 實時監(jiān)聽窗口變化 windowresize的兩種方法
這篇文章主要介紹了Vue 實時監(jiān)聽窗口變化 windowresize的兩種方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了Vue官方文檔梳理之全局配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
最近發(fā)現(xiàn)好多小伙伴在面試的過程中會問到vue如何使用less和scss，所以下面這篇文章主要給大家介紹了關于Less在Vue中的使用方法,需要的朋友可以參考下2023-10-10
Vue中splice()方法對數(shù)組進行增刪改等操作的實現(xiàn)
vue中對數(shù)組的元素進行刪除,以前一直以為這個方法是vue中特有的,后來百度之后才知道原來是js的一個寫法,下面這篇文章主要給大家介紹了關于Vue中splice()方法對數(shù)組進行增刪改等操作的實現(xiàn)方法,需要的朋友可以參考下2023-05-05
本篇文章主要介紹了Vue學習筆記進階篇之函數(shù)化組件探究，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了vue中使用自定義指令實現(xiàn)按鈕權限展示功能，本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-04-04