TS定義組件Props的類型與默認值方式
更新時間：2026年05月31日 10:38:32 作者：滴滴出行~
這段文章主要介紹了Vue.js中定義組件props的三種方法,包括直接定義默認值、通過defineProps傳遞純類型參數(shù)以及使用withDefaults編譯器宏來聲明props類型,適合Vue.js開發(fā)者參考
今天在開發(fā)中，突然想到，平時定義組件的props時，在引入了ts后，常用于定義他的類型或者默認值，看了一下官方文檔，對組件props的定義提供了幾種方法。
官網(wǎng)地址
Vue.js - 漸進式 JavaScript 框架 | Vue.js
三種用法
用法1
只定義默認值，直接使用defineProps就可以
const props = defineProps({
options: {
type: Array,
default: () => [{ label: '男', value: 1 }]
}
})用法2
針對類型的 props聲明，props 可以通過給 defineProps 傳遞純類型參數(shù)的方式來聲明。
具體寫法如下：
// 2.defineProps<泛型參數(shù)>()的方式 沒辦法做默認賦值
type propsType = {
options: {
label: string
value: string | number
}[]
}
const props = defineProps<propsType>()用法3
使用類型聲明時的默認 props 值，vue官方為我們提供了withDefaults 編譯器宏。
具體寫法如下：
// 3.withDefaults 編譯器宏 泛型加默認值
type propsType = {
options: {
label: string
value: string | number
}[]
}
const props = withDefaults(defineProps<propsType>(), {
options: () => [
{
label: '男',
value: 1
}
]
})總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了vue圖片上傳組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
本文通過實例代碼給大家介紹了vue 瑩石攝像頭直播視頻功能，文章還給大家提到了vue h5項目調(diào)用手機攝像頭錄像并上傳的功能，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了Vite的原理，Vite是一個更輕、更快的web應用開發(fā)工具，面向現(xiàn)代瀏覽，Vite創(chuàng)建的項目是一個普通的Vue3應用，相比基于Vue-cli創(chuàng)建的應用少了很多配置文件和依賴，下面基于Vite相關(guān)資料內(nèi)容，需要的朋友可以參考一下2022-02-02
這篇文章主要介紹了詳解element-ui中表單驗證的三種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)滾動條始終懸浮在頁面最下方，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
前端插件庫之vue3使用vue-codemirror插件的步驟和實例
CodeMirror是一款基于JavaScript、面向語言的前端代碼編輯器,下面這篇文章主要給大家介紹了關(guān)于前端插件庫之vue3使用vue-codemirror插件的步驟和實例,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了基于vue.js實現(xiàn)圖片輪播效果，vue如何實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了Vue封裝數(shù)字框組件實現(xiàn)流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-04-04
這篇文章主要為大家詳細介紹了vue使用ECharts實現(xiàn)折線圖和餅圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
今天小編就為大家分享一篇vue 返回上一頁,頁面樣式錯亂的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11