這篇文章給大家分享的是有關(guān)如何解決vue2父組件傳遞props異步數(shù)據(jù)到子組件的問題的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

稷山網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)于2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

案例一

父組件parent.vue

// asyncData為異步獲取的數(shù)據(jù)，想傳遞給子組件使用

子組件child.vue

上面按照這里的解析，子組件的html中的{{childData}}的值會隨著父組件的值而改變，但是created里面的卻不會發(fā)生改變(生命周期問題)

案例二

parent.vue

child.vue

created里面的卻不會發(fā)生改變， 子組件的html中的{{{childObject.items[0]}}的值雖然會隨著父組件的值而改變，但是過程中會報錯

// 首先傳過來的是空，然后在異步刷新值，也開始時候childObject.items[0]等同于''.item[0]這樣的操作，所以就會報下面的錯
vue.esm.js?8910:434 [Vue warn]: Error in render function: "TypeError: Cannot read property '0' of undefined"

針對二的解決方法：

使用v-if可以解決報錯問題，和created為空問題

// parent.vue

child.vue

子組件使用watch來監(jiān)聽父組件改變的prop，使用methods來代替created

parent.vue

child.vue

子組件watch computed data 相結(jié)合，有點麻煩

parent.vue

child.vue

使用emit，on，bus相結(jié)合

parent.vue

child.vue

這里使用了bus這個庫，parent.vue和child.vue必須公用一個事件總線（也就是要引入同一個js，這個js定義了一個類似let bus = new Vue()的東西供這兩個組件連接），才能相互觸發(fā)

使用prop default來解決{{childObject.items[0]}}

parent.vue

child.vue

在說用vuex解決方法的時候，首先看看案例三

案例三

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import VueBus from 'vue-bus'
import index from './index.js'
Vue.use(VueBus)

Vue.config.productionTip = false
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 modules: {
  index
 }
})
/* eslint-disable no-new */
new Vue({
 el: '#app',
 store,
 router,
 template: '',
 components: { App }
})

index.js

const state = {
 asyncData: ''
}

const actions = {
 asyncAction ({ commit }) {
  setTimeout(() => {
   commit('asyncMutation')
  }, 2000)
 }
}
const getters = {
}

const mutations = {
 asyncMutation (state) {
  state.asyncData = {'items': [1, 2, 3]}
 }
}

export default {
 state,
 actions,
 getters,
 mutations
}

parent.vue

child.vue

{{$store.state.index.asyncData.items[0]}}可以取到改變的值，但是過程中還是出現(xiàn)這樣的報錯，原因同上

復(fù)制代碼 代碼如下:

[Vue warn]: Error in render function: "TypeError: Cannot read property '0' of undefined"

所以這里的解決方法是：vuex結(jié)合computed、mapState或者合computed、mapGetters

parent.vue

child.vue

index.js

const state = {
 asyncData: ''
}

const actions = {
 asyncAction ({ commit }) {
  setTimeout(() => {
   commit('asyncMutation', {'items': [1, 2, 3]})// 作為參數(shù)，去調(diào)用mutations中的asyncMutation方法來對state改變
  }, 2000)
 }
}
const getters = {
 getAsyncData: state => state.asyncData
}

const mutations = {
 asyncMutation (state, params) {
  state.asyncData = params.items[0] // 此時params={'items': [1, 2, 3]}被傳過來賦值給asyncData，來同步更新asyncData的值，這樣html就可以拿到asyncData.items[0]這樣的值了
 }
}

export default {
 state,
 actions,
 getters,
 mutations
}

注意上面的

....
commit('asyncMutation', {'items': [1, 2, 3]})
...
state.asyncData = params.items[0]

如果寫成這樣的話

commit('asyncMutation')
state.asyncData = {'items': [1, 2, 3]}

首先asyncAction是個異步的操作，所以asyncData默認值為空，那么還是導(dǎo)致,child.vue這里報0的錯

不過根據(jù)以上的案例，得出來一個問題就是異步更新值的問題，就是說開始的時候有個默認值，這個默認值會被異步數(shù)據(jù)改變，比如說這個異步數(shù)據(jù)返回的object，如果你用props的方式去傳遞這個數(shù)據(jù)，其實第一次傳遞的空值，第二次傳遞的是更新后的值，所以就出現(xiàn){{childObject.items[0]}}類似這種取不到值的問題，既然說第一次是空值，它會這樣處理''.items[0],那么我們是不是可以在html判斷這個是不是空（或者在computed來判斷是否為默認值），所以把案例二的child.vue

這樣是可以通過不報錯的，就是created是空值，猜想上面vuex去stroe也可以也可以這樣做

感謝各位的閱讀！關(guān)于“如何解決vue2父組件傳遞props異步數(shù)據(jù)到子組件的問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)站欄目：如何解決vue2父組件傳遞props異步數(shù)據(jù)到子組件的問題
分享網(wǎng)址：http://www.yuzhuanjia.cn/article/jhoiid.html