使用props傳值時(shí)無法在mounted處理的解決方案
props傳值無法在mounted處理的解決
遇到的問題
父組件傳值，在子組件中不能用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為異步傳值（就是在父組件沒有加載完數(shù)據(jù)時(shí)，floor1就傳遞到了子組件，此時(shí)floor1還沒被附上值，先執(zhí)行了子組件的mounted），而mounted執(zhí)行一次后無法改變floor1的值。
解決
使用偵聽器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)致頁面掛掉
mounted() {
// 頁面卡死
? ? this.$nextTick(() => {
? ? ? this.setUrl()
? ? })
? }2.props
2.1props傳過去的值，第一時(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通過props傳給子組件的值變化后子組件接收到 和 通過refs訪問子組件方法中使用接收到的參數(shù)變化的順序問題
通過refs訪問時(shí)，接收到的參數(shù)是變化前的參數(shù)。還是因?yà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)文章
vue監(jiān)聽瀏覽器原生返回按鈕,進(jìn)行路由轉(zhuǎn)跳操作
這篇文章主要介紹了vue監(jiān)聽瀏覽器原生返回按鈕,進(jìn)行路由轉(zhuǎn)跳操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
從vue基礎(chǔ)開始創(chuàng)建一個(gè)簡單的增刪改查的實(shí)例代碼(推薦)
這篇文章主要介紹了從vue基礎(chǔ)開始創(chuàng)建一個(gè)簡單的增刪改查的實(shí)例代碼，需要的朋友參考下2018-02-02
Vue?3中的Hooks函數(shù)是一種用于在組件中共享可復(fù)用邏輯的方式，簡單來說，就是將單獨(dú)功能的js代碼抽離出來，?加工成公共函數(shù)，從而達(dá)到邏輯復(fù)用，下面小編就來和大家聊聊Hooks函數(shù)的使用及封裝思想吧2023-06-06
Vue3?中的?readonly?特性及函數(shù)使用詳解
readonly是Vue3中提供的一個(gè)新特性，用于將一個(gè)響應(yīng)式對(duì)象變成只讀對(duì)象，這篇文章主要介紹了Vue3?中的?readonly?特性詳解,需要的朋友可以參考下2023-04-04
Vue3中的createGlobalState用法及示例詳解
createGlobalState 是 Vue 3 中一種管理全局狀態(tài)的簡便方式,通常用于管理多個(gè)組件間共享的狀態(tài),由 @vueuse/core 提供的,允許創(chuàng)建一個(gè)響應(yīng)式的全局狀態(tài),本文給大家介紹了Vue3中的createGlobalState用法及示例,需要的朋友可以參考下2024-10-10
本文通過實(shí)例代碼給大家介紹了Vue lazyload圖片懶加載的相關(guān)知識(shí)，通過導(dǎo)入配置等操作src/main.jswenj ,代碼簡單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-12-12
vue2.0實(shí)現(xiàn)導(dǎo)航菜單切換效果
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)現(xiàn)導(dǎo)航菜單切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細(xì)介紹了使用Vue實(shí)現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解
這篇文章主要介紹了vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue實(shí)現(xiàn)渲染數(shù)據(jù)后控制滾動(dòng)條位置(推薦)
這篇文章主要介紹了Vue實(shí)現(xiàn)渲染數(shù)據(jù)后控制滾動(dòng)條位置，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12