Vue3綁定props默認(rèn)值問題
更新時(shí)間：2025年08月30日 13:52:47 作者：水果攤見
使用Vue3的defineProps配合TypeScript的interface定義props類型,并通過withDefaults設(shè)置默認(rèn)值,使組件能安全訪問傳入的props數(shù)據(jù)
前言
使用TS、Vue3組織組件中傳入props的通用方式
步驟
步驟1：使用 defineProps 定義 Props
使用interface定義props中各項(xiàng)的類型：
// 組件List.vue
// 定義 Props 類型和接口
interface ListItem {
name: string;
time: string;
content: {
status: number;
name: string;
}[];
}
// 使用 defineProps 定義 Props
const props = defineProps<{
listData?: ListItem[]; // listData 屬性為可選的 ListItem 數(shù)組類型
}>();
步驟2：設(shè)置默認(rèn)值
使用Vue3中的withDefaults定義props默認(rèn)值
// 組件List.vue
// 定義 Props 類型和接口
interface ListItem {
name: string;
time: string;
content: {
status: number;
name: string;
}[];
}
// 使用 withDefaults 設(shè)置默認(rèn)值
const props = withDefaults(
defineProps<{
listData?: ListItem[]; // listData 屬性為可選的 ListItem 數(shù)組類型
}>(),
{
listData: () => [], // 設(shè)置 listData 的默認(rèn)值為空數(shù)組
}
);
之后組件中即可使用props.listData來訪問props中的值。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目使用electron打包桌面應(yīng)用方式
本文詳細(xì)介紹了如何使用Vue3和Electron創(chuàng)建一個(gè)桌面應(yīng)用程序,并提供了一個(gè)完整的步驟指南,包括項(xiàng)目初始化、配置、安裝依賴、主進(jìn)程和渲染進(jìn)程的設(shè)置、打包配置以及解決常見問題的方法2025-12-12
Vuejs實(shí)現(xiàn)帶樣式的單文件組件新方法
這篇文章主要為大家詳細(xì)為大家詳細(xì)介紹了Vuejs實(shí)現(xiàn)帶樣式的單文件組件的新方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Vue.js實(shí)現(xiàn)簡(jiǎn)單動(dòng)態(tài)數(shù)據(jù)處理
本篇文章主要介紹了Vue.js實(shí)現(xiàn)簡(jiǎn)單動(dòng)態(tài)數(shù)據(jù)處理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
眾所周知,當(dāng)容器高度固定而內(nèi)容部分高度超出容器高度時(shí),瀏覽器會(huì)渲染出一個(gè)可以滾動(dòng)并用于顯示剩余界面的條 -- 滾動(dòng)條,它可以簡(jiǎn)單的樣式修改,但是位置是固定的,無法移動(dòng),而我們需要改變位置的時(shí)候,它就不能滿足我們的需求了,這時(shí)我們可以自己手寫一個(gè)2023-10-10
vue+elementui 實(shí)現(xiàn)上傳文件/導(dǎo)入文件的功能示例詳解
文章介紹了如何使用Vue和Element UI實(shí)現(xiàn)上傳文件和導(dǎo)入文件的功能,主要內(nèi)容包括：上傳組件的使用、data中的數(shù)據(jù)存儲(chǔ)、methods中的方法（選擇文件、點(diǎn)擊確定上傳文件、刪除文件）,文章還提供了相關(guān)鏈接供進(jìn)一步學(xué)習(xí),感興趣的朋友一起看看吧2025-03-03
vue3如何通過provide和inject實(shí)現(xiàn)多層級(jí)組件通信
這篇文章主要介紹了vue3如何通過provide和inject實(shí)現(xiàn)多層級(jí)組件通信,本文通過實(shí)例代碼給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
Vue3中如何使用v-model高級(jí)用法參數(shù)綁定傳值
本文給大家介紹Vue3中使用v-model高級(jí)用法參數(shù)綁定傳值的相關(guān)知識(shí),包括單個(gè)輸入框傳值和多個(gè)輸入框傳值,一個(gè)組件接受多個(gè)v-model值,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
Vue源碼探究之虛擬節(jié)點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼探究之虛擬節(jié)點(diǎn)的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
Vue-CLI 3.X 部署項(xiàng)目至生產(chǎn)服務(wù)器的方法
這篇文章主要介紹了Vue-CLI 3.X 部署項(xiàng)目至生產(chǎn)服務(wù)器的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
本文將詳細(xì)介紹jQuery代碼優(yōu)化的9種方法,需要的朋友可以參考下2020-02-02