解決vue中props對象中設(shè)置多個默認值的問題
更新時間：2024年04月09日 09:33:30 作者：songywaa
props中設(shè)置了默認值,但是獲取時（獲取父頁面沒有傳的屬性） 打印出來是undefined,所以本文給大家介紹了解決vue中props對象中設(shè)置多個默認值的問題,需要的朋友可以參考下
1、遇到問題：
props中設(shè)置了默認值，但是獲取時（獲取父頁面沒有傳的屬性） 打印出來是undefined
子組件
props: {
paramsObj: {
type:Object,
default:() => {
return {
tabList: [],
tableFixedHeader: [],
showHandleCol:false,
handleType:[],
isTagData:false,
}
}
}
},
父組件
<RealViewModel :paramsObj="params"></RealViewModel>
params: {
type: "water",
tabList: [
{
name: "濃度數(shù)據(jù)",
id: "ND"
},
{
name: "水域水質(zhì)分析",
id: "SY"
}
],
tableFixedHeader: [
{name:'時間',code:'DT',isFixed:true},
]
}
此時在子組件中，只能獲取到父組件傳過來的值，而沒有傳的屬性沒有了（下圖）
2、原因：
props 默認值的作用：
它只在沒有傳參時才會被讀取，并不會為你的參數(shù)對象補齊屬性，
3、解決方法：
使用計算屬性computed，解決 父頁面不傳參數(shù)情況
子組件
props: {
paramsObj: {
type:Object,
default:() => {
return {}
}
}
},
computed:{
params(){
return Object.assign({
tabList: [],
tableFixedHeader: [],
showHandleCol:false,
handleType:[],
isTagData:false,
},this.paramsObj);
}
},
頁面中直接 params.isTagData 就能直接用了
打印一下看結(jié)果：自動給補齊了父頁面沒有傳的屬性（下圖）
到此這篇關(guān)于解決vue中props對象中設(shè)置多個默認值的問題的文章就介紹到這了,更多相關(guān)vue props多個默認值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue自定義指令的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vue彈窗如何嵌入其它vue頁面,實現(xiàn)方式是將其他頁面作為組件傳入，在父頁面將該組件引入到彈框內(nèi)，實例代碼簡單易懂需要的朋友可以參考下2022-11-11
為vue中的data賦值computed計算屬性后,出現(xiàn)undefined原因及解決
這篇文章主要介紹了為vue中的data賦值computed計算屬性后,出現(xiàn)undefined原因及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
監(jiān)聽器是Vue3中非常好用的一個特性,用于監(jiān)聽某個響應(yīng)式變量的變化,本文就來介紹一下Vue3中使用監(jiān)聽器的具體實踐,具有一定的參考價值,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了table表格中使用el-popover 無效問題解決方法,實例只針對單個的按鈕管用在表格里每一列都有el-popover相當于是v-for遍歷了 所以我們在觸發(fā)按鈕的時候并不是單個的觸發(fā)某一個,需要的朋友可以參考下2024-01-01
使用vue3+vite導(dǎo)入圖片路徑錯亂問題排查及解決
使用vue3+vite開發(fā)的時候,導(dǎo)入svg圖片時,同一個文件夾下的文件,其中一個路徑正常解析,另一個不行,更改文件名之后,該圖片文件就可以正常解析了,本文給大家介紹了使用vue3+vite導(dǎo)入圖片路徑錯亂問題排查及解決,需要的朋友可以參考下2024-03-03
vue動態(tài)綁定class選中當前列表變色的方法示例
這篇文章主要介紹了vue動態(tài)綁定class選中當前列表變色的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue如何實現(xiàn)未登錄不能訪問某些頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文通過實例代碼給大家介紹了vue 圖標選擇器的相關(guān)知識，圖文實例代碼相結(jié)合給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-11-11
本文主要介紹了VUE引入使用G2圖表的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08