使用props傳值時(shí)無(wú)法在mounted處理的解決方案
props傳值無(wú)法在mounted處理的解決
遇到的問(wèn)題
父組件傳值,在子組件中不能用mounted處理
export default{ ?? ?props:['floor1'], ?? ?data(){ ?? ??? ?return { ?? ??? ??? ?floor1_0:'', ?? ??? ??? ?floor1_1:'', ?? ??? ??? ?floor1_2:'', ?? ??? ?} ?? ?}, ?? ?mounted(){ ?? ??? ?console.log(this.floor1) ? ? ? ? ? ? //打印出的不是所傳的值 ?? ??? ?this.floor1_0 = this.floor1[0]; ? ? ? ?? ?} }
因?yàn)閜rops為異步傳值(就是在父組件沒(méi)有加載完數(shù)據(jù)時(shí),floor1就傳遞到了子組件,此時(shí)floor1還沒(méi)被附上值,先執(zhí)行了子組件的mounted),而mounted執(zhí)行一次后無(wú)法改變floor1的值。
解決
使用偵聽(tīng)器watch,當(dāng)floor1改變時(shí),重新計(jì)算
watch:{ ?? ?floor1:function(val){ ?? ??? ?this.floor1_0 = val[0]; ?? ??? ?this.floor1_1 = val[1]; ?? ?} }
vue筆記(props和mounted)
1.mounted
1.1mounted中使用$nextTick會(huì)導(dǎo)致頁(yè)面掛掉
mounted() { // 頁(yè)面卡死 ? ? this.$nextTick(() => { ? ? ? this.setUrl() ? ? }) ? }
2.props
2.1props傳過(guò)去的值,第一時(shí)間在mounted是獲取不到的。因?yàn)槭钱惒絺髦档摹?/p>
解決方法:
(1)使用watch
(2)將需要進(jìn)行的處理在父組件進(jìn)行操作,然后將操作完的值直接傳給子組件。
watch: { ? ?datas: function (val) { ? ? ?? ? ? } ? } 或 (父) ?<examAchSearchHeader :exprotUrl="exprotUrl"></examAchSearchHeader> ?... this.exportUrl = XXXX (子) props: { ? ? exportUrl: String }
2.2通過(guò)props傳給子組件的值變化后子組件接收到 和 通過(guò)refs訪問(wèn)子組件方法中使用接收到的參數(shù)變化的順序問(wèn)題
通過(guò)refs訪問(wèn)時(shí),接收到的參數(shù)是變化前的參數(shù)。還是因?yàn)楫惒降膯?wèn)題??梢詮?qiáng)制賦值改變,或用watch等。
?// parent ?<examAchTable ref="achTable" :dataList="examAchList"></examAchTable> ? ?// 若這里不強(qiáng)制賦值一下,在examAchList變化后直接調(diào)用子組件的transData方法時(shí),子組件dataList仍是變化前的值 ?this.$refs.achTable.dataList = this.examAchList ?this.$refs.achTable.transData(res.data.totalRecord) ? ?// child ?transData(total) { ? ? ? if (this.dataList)? ? ? // ... }
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3 中使用 reactive 的問(wèn)題小結(jié)
在 Vue 3 中,如果你使用 reactive 來(lái)定義一個(gè)響應(yīng)式對(duì)象,那么這個(gè)對(duì)象的屬性是不能被重新賦值的,因?yàn)?nbsp;reactive 會(huì)將對(duì)象的屬性轉(zhuǎn)換為 getter/setter,這樣 Vue 才能追蹤到屬性的變化,這篇文章主要介紹了vue3 中使用 reactive 的問(wèn)題,需要的朋友可以參考下2024-03-03Nuxt的動(dòng)態(tài)路由和參數(shù)校驗(yàn)操作
這篇文章主要介紹了Nuxt的動(dòng)態(tài)路由和參數(shù)校驗(yàn)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11koa2+vue實(shí)現(xiàn)登陸及登錄狀態(tài)判斷
這篇文章主要介紹了koa2+vue實(shí)現(xiàn)登陸及登錄狀態(tài)判斷,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-08-08vue中g(shù)et請(qǐng)求如何傳遞數(shù)組參數(shù)的方法示例
這篇文章主要介紹了vue中g(shù)et請(qǐng)求如何傳遞數(shù)組參數(shù)的方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11