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和Vue2的響應(yīng)式原理
這篇文章我們將探討Vue3框架的優(yōu)秀特性、使用原理、周邊生態(tài)和實(shí)戰(zhàn)應(yīng)用，系統(tǒng)的學(xué)習(xí)Vue生態(tài)體系，希望和大家共同成長(zhǎng)，我們一起探討下Vue3和Vue2的響應(yīng)式原理，那究竟什么是“響應(yīng)式”，接下來(lái)跟著小編一起來(lái)學(xué)習(xí)吧
2023-05-05
Vue3和Vite不得不說(shuō)的那些事
這篇文章主要為大家詳細(xì)介紹了Vue3和Vite的那些事，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02
vue導(dǎo)出報(bào)表至excel表格三種方式
這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出報(bào)表至excel表格的三種方式,導(dǎo)出報(bào)表是實(shí)際開(kāi)發(fā)的常見(jiàn)功能,前后端都可以實(shí)現(xiàn)表格導(dǎo)出,本文介紹的是用vue實(shí)現(xiàn),需要的朋友可以參考下
2023-09-09
如何在vue中使用ant-design-vue組件
這篇文章主要介紹了如何在vue中使用ant-design-vue組件,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-01-01
Vue.js性能優(yōu)化N個(gè)技巧(值得收藏)
本文主要還是針對(duì) Vue.js 2.x 版本，畢竟接下來(lái)一段時(shí)間，Vue.js 2.x 還是我們工作中的主流版本，對(duì)vue.js性能優(yōu)化技巧相關(guān)知識(shí)感興趣的朋友一起看看吧
2021-09-09
Vue關(guān)閉當(dāng)前頁(yè)面的方法
Vue中關(guān)閉當(dāng)前頁(yè)面的方法與原生JavaScript類似,都是通過(guò)window對(duì)象的close方法實(shí)現(xiàn),這篇文章主要介紹了Vue關(guān)閉當(dāng)前頁(yè)面的方法,需要的朋友可以參考下
2023-09-09
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-03
Nuxt的動(dòng)態(tài)路由和參數(shù)校驗(yàn)操作
這篇文章主要介紹了Nuxt的動(dòng)態(tài)路由和參數(shù)校驗(yàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
koa2+vue實(shí)現(xiàn)登陸及登錄狀態(tài)判斷
這篇文章主要介紹了koa2+vue實(shí)現(xiàn)登陸及登錄狀態(tài)判斷，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-08-08
vue中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