快捷導(dǎo)航

TS定義組件Props的類型與默認(rèn)值方式

更新時(shí)間：2026年05月31日 10:38:32 作者：滴滴出行~

這段文章主要介紹了Vue.js中定義組件props的三種方法,包括直接定義默認(rèn)值、通過(guò)defineProps傳遞純類型參數(shù)以及使用withDefaults編譯器宏來(lái)聲明props類型,適合Vue.js開(kāi)發(fā)者參考

官網(wǎng)地址

Vue.js - 漸進(jìn)式 JavaScript 框架 | Vue.js

三種用法

用法1

只定義默認(rèn)值，直接使用defineProps就可以

const props = defineProps({
  options: {
    type: Array,
    default: () => [{ label: '男', value: 1 }]
  }
})

用法2

針對(duì)類型的 props聲明，props 可以通過(guò)給 defineProps 傳遞純類型參數(shù)的方式來(lái)聲明。

具體寫(xiě)法如下：

// 2.defineProps<泛型參數(shù)>()的方式    沒(méi)辦法做默認(rèn)賦值
type propsType = {
  options: {
    label: string
    value: string | number
  }[]
}
const props = defineProps<propsType>()

用法3

使用類型聲明時(shí)的默認(rèn) props 值，vue官方為我們提供了withDefaults 編譯器宏。

具體寫(xiě)法如下：

// 3.withDefaults  編譯器宏 泛型加默認(rèn)值
type propsType = {
  options: {
    label: string
    value: string | number
  }[]
}
const props = withDefaults(defineProps<propsType>(), {
  options: () => [
    {
      label: '男',
      value: 1
    }
  ]
})

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue圖片上傳組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue圖片上傳組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
Vue 瑩石攝像頭直播視頻實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了vue 瑩石攝像頭直播視頻功能，文章還給大家提到了vue h5項(xiàng)目調(diào)用手機(jī)攝像頭錄像并上傳的功能，需要的朋友可以參考下
2018-08-08
學(xué)習(xí)Vite的原理
這篇文章主要介紹了Vite的原理，Vite是一個(gè)更輕、更快的web應(yīng)用開(kāi)發(fā)工具，面向現(xiàn)代瀏覽，Vite創(chuàng)建的項(xiàng)目是一個(gè)普通的Vue3應(yīng)用，相比基于Vue-cli創(chuàng)建的應(yīng)用少了很多配置文件和依賴，下面基于Vite相關(guān)資料內(nèi)容，需要的朋友可以參考一下
2022-02-02
詳解element-ui中表單驗(yàn)證的三種方式
這篇文章主要介紹了詳解element-ui中表單驗(yàn)證的三種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
vue實(shí)現(xiàn)滾動(dòng)條始終懸浮在頁(yè)面最下方
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滾動(dòng)條始終懸浮在頁(yè)面最下方，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
前端插件庫(kù)之vue3使用vue-codemirror插件的步驟和實(shí)例
CodeMirror是一款基于JavaScript、面向語(yǔ)言的前端代碼編輯器,下面這篇文章主要給大家介紹了關(guān)于前端插件庫(kù)之vue3使用vue-codemirror插件的步驟和實(shí)例,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
基于vue.js實(shí)現(xiàn)圖片輪播效果
這篇文章主要為大家詳細(xì)介紹了基于vue.js實(shí)現(xiàn)圖片輪播效果，vue如何實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
Vue封裝數(shù)字框組件實(shí)現(xiàn)流程詳解
這篇文章主要介紹了Vue封裝數(shù)字框組件實(shí)現(xiàn)流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2023-04-04
vue使用ECharts實(shí)現(xiàn)折線圖和餅圖
這篇文章主要為大家詳細(xì)介紹了vue使用ECharts實(shí)現(xiàn)折線圖和餅圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue 返回上一頁(yè),頁(yè)面樣式錯(cuò)亂的解決
今天小編就為大家分享一篇vue 返回上一頁(yè),頁(yè)面樣式錯(cuò)亂的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11