鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ vue.js 2.0怎樣實現(xiàn)父組件方法先于子組件方法之前執(zhí)行

vue.js 2.0怎樣實現(xiàn)父組件方法先于子組件方法之前執(zhí)行

使用vue-cli創(chuàng)建的項目,父組件App.vue里加載了子組件index.vue,父組件與子組件的methods里各自有個方法。預(yù)設(shè)的想法是想在父組件App.vue的方法里把a(bǔ)jax請求到的數(shù)據(jù)設(shè)置成緩存,然后子組件index.vue的方法去使用緩存的數(shù)據(jù)。但調(diào)試結(jié)果發(fā)現(xiàn),無論父組件App.vue里的方法放在函數(shù)生命周期里的哪個鉤子里,執(zhí)行的順序總是慢于子組件index.vue的方法,導(dǎo)致子組件里調(diào)用的緩存數(shù)據(jù)是undefined,結(jié)果報錯。詳情如下圖
圖片描述

圖片描述

父組件代碼如下:

<template>
    <div id="app">
        <router-view/>
    </div>
</template>

<script>
import bus from '../static/js/bus.js'
export default {
    name: 'app',
    data () {
        return {
        
        }
    },
    methods: {
        checkLoingStatus () {
            //首次進(jìn)入頁面初始化默認(rèn)未登錄并跳轉(zhuǎn)到登錄頁面
            if (!this.currentLoginStatus && !this.loginStatus) {
                App.setStorage('loginStatus', {'loginStatus': false}, 'localStorage')
                window.location.href = "#/signIn"
            }
        },
        getData () {
            $.ajax({
                url: '../../static/data/data.json',
                type: 'get',
                success: (response) => {
                    console.log('=== ' + response.message + ' ===')
                    console.log('=== 緩存基礎(chǔ)配置數(shù)據(jù)成功 ===');
                    //此處設(shè)置基礎(chǔ)數(shù)據(jù)緩存response.data
                    App.setStorage('response', {'data': response.data}, 'localStorage')
                },
                error: (response) => {
                    //...
                }
            })
        }
    },
    beforeCreate:function(){//組件實例化之前
        console.log('1===beforeCreate===')
    },
    created:function(){//組件實例化了
        console.log('2===created===')
    },
    beforeMount:function(){//組件寫入dom結(jié)構(gòu)之前
        console.log('3===beforeMount===')
    },
    mounted:function(){//組件寫入dom結(jié)構(gòu)了
        console.log('4===mounted===')
        //基礎(chǔ)配置數(shù)據(jù)
        this.getData()
    },
    beforeUpdate:function(){//組件更新前
        console.log('5===beforeUpdate===')
    },
    updated:function(){//組件更新比如修改了文案
        console.log('6===updated===')
    },
    beforeDestroy:function(){//組件銷毀之前
        console.log('7===beforeDestroy===')
    },
    destroyed:function(){//組件已經(jīng)銷毀
        console.log('8===destroyed===')
    }
}
</script>

子組件代碼如下:

<template>
    <div class="page">
        <!-- 省略 -->
    </div>
</template>

<script>
export default {
    name: 'index',
    data() {
        return {
        }
    },
    components: {
    },
    methods: {
        getStorageResponseData () {
            //獲取緩存的基礎(chǔ)配置數(shù)據(jù)
            console.log('=== 開始使用緩存里的基礎(chǔ)配置數(shù)據(jù) ===')
            this.responseData = App.getStorage('response').data
        }
    },
    mounted () {
        this.$nextTick(() => {
            //由于getStorageResponseData比父組件的設(shè)置緩存方法先執(zhí)行
            //結(jié)果獲取不到緩存數(shù)據(jù),報undefined
            this.getStorageResponseData()
        })
    }
}
</script>
回答
編輯回答
糖豆豆

你把父組件拿到的數(shù)據(jù)當(dāng)做props傳給子組件啊,不需要緩存

2017年7月13日 19:30
編輯回答
賤人曾

你確定在異步響應(yīng)完成之前子組件還沒有走完一遍生命周期?

2017年1月17日 07:31
編輯回答
念初

思路好像有點(diǎn)問題,因為ajax異步請求,導(dǎo)致你這個緩存其實不是最優(yōu)的傳遞方式,子父類組件推薦用
1、prop傳遞prop文檔

2、傳遞進(jìn)去后,可以在子組件內(nèi)調(diào)用updated 鉤子函數(shù)進(jìn)行渲染,可以解決異步的問題

2018年8月28日 16:51
編輯回答
維她命

我今天也遇到了類似的問題,在父組件created時異步請求數(shù)據(jù)并存入vuex,子組件created時使用vuex里的數(shù)據(jù)初始化,結(jié)果子組件初始化時vuex里的數(shù)據(jù)是空的。后來發(fā)現(xiàn)可以在子組件里通過watch監(jiān)聽vuex里的屬性試試,結(jié)果成功啦~
不過話說回來如果像樓主一樣在不用vuex的情況下,直接在父組件鉤子函數(shù)this.getData()之后再通過this.$refs.child.getStorageResponseData()調(diào)用子組件的方法應(yīng)該可以解決問題。

2017年10月17日 14:37
編輯回答
怪痞

拋開大家說的你的思路啥的有沒有問題,單純的你想要父組件執(zhí)行之后子組件才執(zhí)行,那么你等父組件將數(shù)據(jù)取到之后再父組件中調(diào)用子組件的函數(shù)就行了。

2017年6月19日 04:51
編輯回答
負(fù)我心

本題的初衷是把父組件App.vue與子組件index.vue的配置數(shù)據(jù)全部都寫在一個data.json文件,然后在父組件App.vue通過一次ajax請求到數(shù)據(jù),在App.vue使用數(shù)據(jù)的同時,把數(shù)據(jù)緩存起來,給子組件index.vue去使用,以到達(dá)減少ajax請求次數(shù),但發(fā)現(xiàn)這樣無法實現(xiàn)。所以,還是回歸原始解決方法,把data的配置數(shù)據(jù)分開成兩個json文件,分別在父組件與子組件去調(diào)用ajax獲取并分別使用。

2018年9月3日 02:39
編輯回答
避風(fēng)港

父子組件鉤子漢族加載順序:
father created
father before mounted
son created
son before mount
son mounted
father mounted
所以,你在父組件 beforeMounted 中已初始化的值一定可以通過props下發(fā)到子組件

2018年6月15日 12:46
編輯回答
吢涼

父組件往子組件傳遞數(shù)據(jù)應(yīng)該使用props,如果組件較多,通信頻繁,推薦使用vuex。

2017年2月23日 17:18
編輯回答
脾氣硬

解決了嗎? 我也是想 減少ajax請求次數(shù)

2017年9月4日 06:46
編輯回答
熟稔

路過:是不是可以考慮用vuex。。。。。。。。。。。。。

2018年9月21日 09:42