解決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去除#問題處理經(jīng)過，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了VNode虛擬節(jié)點,結(jié)合實例形式分析了VNode虛擬節(jié)點的基本功能、原理與實現(xiàn)方法,需要的朋友可以參考下2023-06-06
安裝vue無法運行、此系統(tǒng)無法運行腳本問題及解決
這篇文章主要介紹了安裝vue無法運行、此系統(tǒng)無法運行腳本問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
今天小編就為大家分享一篇vuejs 制作背景淡入淡出切換動畫的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了vue2.0父子組件間通信的實現(xiàn)方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-04-04
這篇文章主要介紹了Vue-Router的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue?parseHTML函數(shù)解析器遇到結(jié)束標簽
這篇文章主要介紹了vue?parseHTML函數(shù)源碼解析之析器遇到結(jié)束標簽的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
該文章主要介紹了在線日期計算器工具的開發(fā)過程,包括核心功能設(shè)計、實現(xiàn)細節(jié)、狀態(tài)管理和日期處理技巧,工具提供了日期間隔計算、日期加減計算、年齡計算和工作日計算等功能,需要的朋友可以參考下2026-01-01
這篇文章主要介紹了vue直接打開public(本地)文件下的pdf文件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3頁面切換/刷新后恢復(fù)滾動位置的超精簡實現(xiàn)方案
在 Vue3 前端項目中,當用戶在長列表 / 長內(nèi)容頁面滾動瀏覽后,切換到其他頁面再返回,或刷新當前頁面時,滾動條會默認回到頂部,體驗較差,本文將分享一種基于 ref 引用 + 本地存儲的方案,實現(xiàn)滾動位置的記憶與恢復(fù),需要的朋友可以參考下2026-03-03