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ù)。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue3+ts import引入第三方js文件報錯的2種解決方法
這篇文章主要給大家介紹了關于vue3+ts import引入第三方js文件報錯的2種解決方法,在Vue中通常我們引入一個js插件都是使用npm方式下載然后import使用的,需要的朋友可以參考下2023-08-08
如果我們在每個組件中去重復定義這些屬性和方法會使得項目出現(xiàn)代碼冗余并提高了維護難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2023-02-02
在頁面進行pdf預覽的時候，由于文件不能夠打印和下載很難滿足客戶的需求，接下來通過本文給大家介紹vue使用pdf.js來進行pdf預覽,需要的朋友可以參考下2021-12-12
Vue多層數(shù)據(jù)結構響應式失效,視圖更新失敗問題
這篇文章主要介紹了Vue多層數(shù)據(jù)結構響應式失效,視圖更新失敗問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了vue父組件調用子組件方法報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本篇文章主要介紹了詳解Vue2 無限級分類(添加,刪除,修改) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了Vue 計算屬性 computed，一般情況下屬性都是放到data中的，但是有些屬性可能是需要經(jīng)過一些邏輯計算后才能得出來，那么我們可以把這類屬性變成計算屬性，下面我們來看看具體實例,需要的朋友可以參考一下2021-10-10
這篇文章主要為大家詳細介紹了vue.js路由跳轉的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了vue仿網(wǎng)易云音樂的單頁面應用實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
vue 項目中的this.$get,this.$post等$的用法案例詳解
vue.js的插件應該暴露一個install方法。這個方法的第一個參數(shù)是vue構造器，第二個參數(shù)是一個可選的選項對象，首頁要安裝axios，本文結合案例代碼給大家詳細講解vue 中的this.$get,this.$post等$的用法，一起學習下吧2022-12-12