在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ vue生命周期問題

vue生命周期問題

場景:分頁
父組件通過axios取到后端laravel的數(shù)據(jù)flightdata,flightdata中包含一個(gè)總頁數(shù)total,每頁顯示數(shù)據(jù)條數(shù)per_page

父組件:向子組件pager傳page、last 和 path,last是通過total/per_page向上取整計(jì)算出來的,問題就出在它上面

<template>
    <div>
        ...
        <pager :current="page" :last="last" :path="path"></pager>
    </div>
</template>
<script>
...
export default {
    //路由傳過來的當(dāng)前頁
    props: ['page'],
    
    data () {
        return {
            flightsData: '',
            path: 'today',
            //last: 999,
            last: '',
            api: '/notice_today/all'
        }
    },

    created () {
        this.getData()
    },

    watch: {
        '$route' (to, from) {
            this.getData()
        }
    },

    methods: {
        getData () {
            this.axios({
                method: 'get',
                baseURL: '/api',
                url: this.api,
                params: {page: this.page},
                timeout: 500,
                withCredentials: true
            }).then(response => {
                this.flightsData = response.data
                this.last = Math.ceil(this.flightsData.total / this.flightsData.per_page)
            })
        }
    },
...
}
</script>

子組件:

<template>
    ...
    //遍歷pagerArray生成頁碼
    ...
    //觀察父組件傳過來的值
    {{ current }}
    {{ last }}
    {{ _last }}
    {{ path }}
</template>
<script>
export default {
    props: {
        current: { default: 1 },
        last: { required: true },
        path: { required: true }
    },
    
    data () {
        return {
            pagerArray: [],
            _last: ''
        }
    }
    mounted () {
        this.pagerRender()
    },

    watch: {
        '$route' (to, from) {
            this.pagerRender()
        }
    },
    
    methods: {
        pagerRender () {
            //this.last 要參與計(jì)算
            this._last = this.last
        }
    }
}
</script>

發(fā)現(xiàn)問題:
子組件的pagerRender()方法要用到父組件傳給子組件的值last
但是父組件卻不能第一時(shí)間把last最新的值傳給子組件:

我將父組件的last賦一個(gè)值99,父組件應(yīng)該在created階段通過getData()方法給last賦成真實(shí)頁數(shù)的值,比如5

我子組件中的created階段通過pagerRender()方法將last的值賦給_last,按理來說,最后{{ last }}和{{ _last }}都該是真實(shí)頁數(shù)5,但是第一時(shí)間打開頁面時(shí) {{ _last }}的值其實(shí)是99,{{ last }}值為5,難道last的值傳進(jìn)子組件兩次?!

改變頁數(shù)(點(diǎn)擊上下頁)后{{ _last }}才開始和{{ last }}同步,就是說第一次渲染頁面的時(shí)候last的最新值沒有第一時(shí)間傳到子組件

但是同時(shí) {{ current }} 和 {{ _current }}的值都是對的

我覺得我對生命周期理解出了什么問題,但是確實(shí)找不到原因

回答
編輯回答
純妹

axios的通訊是異步的,即便父組件created時(shí)候開始的,但是得到的時(shí)候可能已經(jīng)是子組件_last已經(jīng)賦值了;建議放到router.query或者param里面,再有子組件wtach賦值;這樣舊值依然會(huì)在;

2018年9月14日 00:23
編輯回答
哚蕾咪

在子組件添加last的watch

  watch: {
    '$route' (to, from) {
      this.prev_and_next()
      this.pagerRender()
    },
    'last' (to, from) {
      this.pagerRender()
    }
  },

解決了這個(gè)問題

2017年8月21日 12:48