快捷導(dǎo)航

解決vue中props對(duì)象中設(shè)置多個(gè)默認(rèn)值的問題

更新時(shí)間：2024年04月09日 09:33:30 作者：songywaa

props中設(shè)置了默認(rèn)值,但是獲取時(shí)（獲取父頁面沒有傳的屬性）打印出來是undefined,所以本文給大家介紹了解決vue中props對(duì)象中設(shè)置多個(gè)默認(rèn)值的問題,需要的朋友可以參考下

1、遇到問題：

props中設(shè)置了默認(rèn)值，但是獲取時(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:'時(shí)間',code:'DT',isFixed:true},
	  ]
}

此時(shí)在子組件中，只能獲取到父組件傳過來的值，而沒有傳的屬性沒有了（下圖）

在這里插入圖片描述

2、原因：

props 默認(rèn)值的作用：

它只在沒有傳參時(shí)才會(huì)被讀取，并不會(huì)為你的參數(shù)對(duì)象補(bǔ)齊屬性，

3、解決方法：

使用計(jì)算屬性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é)果：自動(dòng)給補(bǔ)齊了父頁面沒有傳的屬性（下圖）

在這里插入圖片描述

到此這篇關(guān)于解決vue中props對(duì)象中設(shè)置多個(gè)默認(rèn)值的問題的文章就介紹到這了,更多相關(guān)vue props多個(gè)默認(rèn)值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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