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