vue3中defineProps的使用詳解

更新時間：2025年10月28日 11:14:58 作者：BillKu

本文介紹了Vue組件中props的三種聲明方式：數(shù)組寫法、對象寫法和TypeScript類型聲明寫法,數(shù)組寫法適用于快速原型開發(fā),但缺乏類型校驗；對象寫法提供了基本類型校驗和默認值設(shè)置；TypeScript類型聲明寫法結(jié)合了Vue的運行時校驗和TypeScript的靜態(tài)類型檢查

1、數(shù)組寫法

const props = defineProps(["applyBasicInfo", "operateCommandType"]);

這是一個非常基礎(chǔ)的 Vue props 聲明方式，適用于簡單場景。以下是詳細解釋：

代碼含義

const props = defineProps(["applyBasicInfo", "operateCommandType"]);

作用：聲明組件接收兩個 props（屬性）
特點：僅指定 prop 名稱，不進行任何類型校驗
等價于：

defineProps({
  applyBasicInfo: null,       // 無類型檢查
  operateCommandType: null     // 無類型檢查
})

關(guān)鍵特性分析

1.極簡聲明

只聲明 props 的名稱（字符串數(shù)組）
不校驗類型
沒有默認值
不強制 required

2.適用場景

快速原型開發(fā)
不需要類型檢查的簡單組件
臨時過渡代碼

3.實際效果

<!-- 父組件 -->
<ChildComponent 
  :applyBasicInfo="任何類型的數(shù)據(jù)" <!-- 可以是對象、字符串、數(shù)字等 -->
  operateCommandType="任何內(nèi)容"    <!-- 可以是任意類型 -->
/>

<!-- 子組件 -->
<script setup>
// 使用時需要自行確保類型正確
console.log(props.applyBasicInfo) // 可能是任意類型
</script>

與其他聲明方式的對比

特性	數(shù)組寫法	對象寫法（完整）	TypeScript 類型寫法
類型校驗	? 無	? Vue 運行時校驗	? 編譯時校驗
默認值	? 不能設(shè)置	? 通過 default 設(shè)置	? 通過 withDefaults 設(shè)置
必需性控制	? 默認都是可選	? 通過 required 控制	? 通過 ? 符號控制
類型提示	? 無	?? 基礎(chǔ)類型提示	? 完整類型提示
代碼安全性	?? 低（可能運行時出錯）	?? 中（有基礎(chǔ)校驗）	?? 高（編譯時攔截錯誤）

潛在風(fēng)險示例

<!-- 父組件傳遞錯誤類型 -->
<ChildComponent 
  :applyBasicInfo="123"        <!-- 傳遞數(shù)字 -->
  operateCommandType           <!-- 未傳遞 -->
/>

<!-- 子組件使用時 -->
<script setup>
// 可能引發(fā)運行時錯誤
props.applyBasicInfo.name      // 報錯：數(shù)字沒有 name 屬性
props.operateCommandType       // 拼寫錯誤也不會警告（正確是 operateCommandType）
</script>

為什么要用這種寫法？

歷史兼容：Vue 2 的 props 數(shù)組寫法在 Vue 3 中仍然可用
快速開發(fā)：節(jié)省寫類型校驗的時間
簡單場景：當 props 類型不重要或可以確定時

如何改進？

基礎(chǔ)改進（添加類型校驗）

const props = defineProps({
  applyBasicInfo: {
    type: Object,
    required: true
  },
  operateCommandType: {
    type: String,
    default: "view"
  }
});

高級改進（TypeScript）

interface ApplyBasicInfo {
  id: number;
  name: string;
}

const props = defineProps<{
  applyBasicInfo: ApplyBasicInfo;
  operateCommandType?: string;
}>();

最佳實踐建議

僅用于臨時代碼：正式項目建議使用完整聲明

配合 JSDoc 使用（如果不用 TypeScript）：

/**
 * @typedef {Object} ApplyBasicInfo
 * @property {number} id
 * @property {string} name
 */

const props = defineProps(["applyBasicInfo", "operateCommandType"]);

漸進式增強：后續(xù)逐步替換為完整聲明

這種寫法就像騎自行車不戴頭盔——簡單快捷，但不夠安全。建議新手僅在快速驗證想法時使用，正式開發(fā)中盡量使用更完善的 props 聲明方式。

2、對象寫法（純 JavaScript 項目的寫法，運行時 props 聲明）

const props = defineProps({
  applyBasicInfo: {
    type: Object, // 要求必須是 Object 類型
    required: true // 表示父組件必須傳遞這個prop，不能與 default 同時使用
  },
  operateCommandType: {
    type: String, // 要求必須是 String 類型
    default: "info-view" // 表示當父組件沒有傳遞時使用默認值，不能與 required 同時使用
  }
});

數(shù)組簡寫 vs 對象寫法

// 簡寫方式（不推薦）
defineProps(['applyBasicInfo', 'operateCommandType'])

// vs 

// 當前對象寫法（推薦）
defineProps({
  applyBasicInfo: { type: Object, required: true },
  operateCommandType: { type: String, default: "info-view" }
})

特性	數(shù)組寫法	對象寫法
類型檢查	? 無	? 基礎(chǔ)類型檢查
默認值	? 不可設(shè)置	? 可設(shè)置
必填控制	? 默認全部可選	? 精確控制
代碼安全性	?? 低	?? 中等

這段代碼使用 Vue 的 defineProps 方法聲明組件需要接收的兩個 props（組件參數(shù)），并設(shè)置了參數(shù)的基本驗證規(guī)則。

3、TypeScript 的類型聲明寫法

3.1、使用標準的PropType進行對象類型定義

import type { PropType } from "vue";
import type { ApplyBasicInfo } from "@/interface";

const props = defineProps({
  applyBasicInfo: {
    type: Object as PropType<ApplyBasicInfo>, // 使用標準的PropType進行對象類型定義
    required: true // 表示父組件必須傳遞這個prop，不能與 default 同時使用
  },
  operateCommandType: {
    type: String,
    default: "info-view" // 表示當父組件沒有傳遞時使用默認值，不能與 required 同時使用
  }
});

關(guān)鍵概念拆解

1. 類型導(dǎo)入部分

import type { PropType } from "vue";
import type { ApplyBasicInfo } from "@/interface";

PropType：Vue 提供的類型工具，用于在運行時聲明中指定復(fù)雜類型
ApplyBasicInfo：自定義的業(yè)務(wù)數(shù)據(jù)類型（通常定義在 src/interface.ts 等位置）
import type：TypeScript 語法，表示只導(dǎo)入類型信息，不導(dǎo)入實際代碼

2. 核心 props 聲明

applyBasicInfo: {
  type: Object as PropType<ApplyBasicInfo>, // 類型斷言
  required: true
}

Object：Vue 的運行時類型校驗（基礎(chǔ)對象類型）
as PropType<ApplyBasicInfo>：類型斷言，告訴 TypeScript 這個對象的具體結(jié)構(gòu)

雙重效果：

運行時：Vue 檢查傳入的是否為對象
開發(fā)時：TypeScript 檢查對象是否符合 ApplyBasicInfo 的結(jié)構(gòu)

3. 對比普通對象聲明

// 普通寫法（只有 Vue 校驗）
applyBasicInfo: {
  type: Object,  // 只知道是個對象，不清楚具體結(jié)構(gòu)
  required: true
}

// 當前寫法（Vue校驗 + TS類型）
applyBasicInfo: {
  type: Object as PropType<ApplyBasicInfo>, // 明確對象結(jié)構(gòu)
  required: true
}

工作原理圖示

graph TD
    A[父組件傳遞 props] --> B{Vue 運行時校驗}
    B -->|通過| C[組件內(nèi)使用]
    B -->|不通過| D[控制臺警告]
    C --> E[TypeScript 類型檢查]
    E -->|類型正確| F[正常開發(fā)]
    E -->|類型錯誤| G[IDE 提示錯誤]

為什么要這樣寫？

優(yōu)勢對比表

特性	普通 Object 類型	當前寫法
代碼提示	只知道是對象，無具體屬性提示	? 顯示 ApplyBasicInfo 的所有屬性
重構(gòu)安全性	修改屬性時不會報錯	? 修改接口定義會引發(fā)相關(guān)代碼報錯
參數(shù)校驗	只校驗是否是對象	? 運行時對象校驗 + 類型結(jié)構(gòu)校驗
協(xié)作效率	需要查文檔看數(shù)據(jù)結(jié)構(gòu)	? 直接通過提示查看數(shù)據(jù)結(jié)構(gòu)

示例類型定義

// 假設(shè)在 @/interface 中
interface ApplyBasicInfo {
  id: number;          // 申請ID
  applicant: string;   // 申請人姓名
  status: 'pending' | 'approved'; // 申請狀態(tài)
  createTime: Date;    // 創(chuàng)建時間
}

在組件中的實際使用

智能提示示例

// 正確使用（有提示）
props.applyBasicInfo.id          // 提示 number 類型
props.applyBasicInfo.applicant   // 提示 string 類型

// 錯誤使用（立即報錯）
props.applyBasicInfo.APPlicant   // ? 拼寫錯誤提示
props.applyBasicInfo.status = 'rejected' // ? 類型不匹配

對應(yīng)模板使用

<template>
  <!-- 顯示申請人信息 -->
  <div>{{ props.applyBasicInfo.applicant }}</div>
  
  <!-- 根據(jù)操作類型顯示不同內(nèi)容 -->
  <div v-if="operateCommandType === 'info-view'">
    查看模式
  </div>
</template>

常見錯誤及解決方案

錯誤1：未定義接口

// 錯誤提示：Cannot find name 'ApplyBasicInfo'
// 解決方案：確保類型文件正確定義并導(dǎo)出
// 在 @/interface.ts 中：
export interface ApplyBasicInfo { ... }

錯誤2：錯誤類型傳遞

<!-- 父組件傳遞錯誤數(shù)據(jù)結(jié)構(gòu) -->
<MyComponent :apply-basic-info="{ id: '100' }" />
<!-- 錯誤：id 應(yīng)該是 number -->

錯誤3：缺少必要屬性

// 組件內(nèi)使用時
const submit = () => {
  console.log(props.applyBasicInfo.createTime) // 如果接口中有該屬性
}
// 當父組件傳遞的對象缺少 createTime 時，TS 會報錯

不同技術(shù)棧的寫法對比

場景	JavaScript 寫法	TypeScript 基礎(chǔ)寫法	當前進階寫法
props 類型	type: Object	type: Object	Object as PropType<T>
代碼提示	無	顯示 Object 類型	顯示具體接口屬性
類型安全	低	中	高
維護成本	高（需口頭溝通數(shù)據(jù)結(jié)構(gòu)）	中（需查看接口定義）	低（直接提示數(shù)據(jù)結(jié)構(gòu)）

最佳實踐建議

接口定義規(guī)范：

在 src/types 或 src/interface 目錄統(tǒng)一管理類型
為每個接口添加文檔注釋

interface ApplyBasicInfo {
  /**
   * 申請的唯一標識
   * @example 123456
   */
  id: number;
}

props 校驗增強：

applyBasicInfo: {
  type: Object as PropType<ApplyBasicInfo>,
  required: true,
  validator: (value: ApplyBasicInfo) => {
    return !!value.id // 添加自定義校驗邏輯
  }
}

默認值處理技巧：

// 對于復(fù)雜對象，建議提供默認值函數(shù)
applyBasicInfo: {
  type: Object as PropType<ApplyBasicInfo>,
  default: () => ({ id: 0, applicant: '', status: 'pending' })
}

這種寫法是 Vue 3 項目中平衡類型安全和開發(fā)效率的典型實踐，既能享受 TypeScript 的類型提示優(yōu)勢，又保留了 Vue 原有的 props 校驗機制，特別適合中大型項目維護使用。

3.2、混合寫法（結(jié)合了 Vue 的運行時 props 校驗和 TypeScript 類型提示的混合寫法）

import type { ApplyBasicInfo } from "@/interface";

const props = defineProps({
  applyBasicInfo: {
    type: Object as () => ApplyBasicInfo, // 使用箭頭函數(shù)返回類型
    required: true // 表示父組件必須傳遞這個prop，不能與 default 同時使用
  },
  operateCommandType: {
    type: String,
    default: "info-view" // 表示當父組件沒有傳遞時使用默認值，不能與 required 同時使用
  }
});

這是一個結(jié)合了 Vue 的運行時 props 校驗和 TypeScript 類型提示的混合寫法代碼，特別適用于 Vue 3 + TypeScript 項目。以下是逐層解析：

代碼結(jié)構(gòu)解析

import type { ApplyBasicInfo } from "@/interface"; // 導(dǎo)入類型

const props = defineProps({
  applyBasicInfo: {
    type: Object as () => ApplyBasicInfo, // 核心類型聲明
    required: true
  },
  operateCommandType: {
    type: String,
    default: "info-view"
  }
});

關(guān)鍵部分詳解

1. 類型導(dǎo)入

import type { ApplyBasicInfo } from "@/interface";

作用：導(dǎo)入自定義類型（通常定義在 src/interface.ts 或類型聲明文件中）

示例類型定義：

// 假設(shè)在 @/interface 中
interface ApplyBasicInfo {
  id: number;
  name: string;
  status: 'pending' | 'approved';
  createTime: Date;
}

2. defineProps 函數(shù)

const props = defineProps({...});

Vue 3 特有語法：用于聲明組件接收的 props
返回響應(yīng)式對象：包含所有已聲明的 props

3. applyBasicInfo 屬性

{
  type: Object as () => ApplyBasicInfo,
  required: true
}

運行時類型：Object 表示接受對象類型（Vue 的運行時校驗）
類型斷言：as () => ApplyBasicInfo 為 TypeScript 提供類型提示
實際效果：

// 使用時可以獲得類型提示
props.applyBasicInfo.id // 提示 number 類型
props.applyBasicInfo.name // 提示 string 類型

4. operateCommandType 屬性

{
  type: String,
  default: "info-view"
}

標準 Vue 校驗：接受字符串類型
默認值：當父組件未傳遞時默認為 "info-view"

代碼特點

特性	說明
雙重校驗	Vue 運行時類型檢查 + TypeScript 靜態(tài)類型提示
明確契約	通過 ApplyBasicInfo 接口明確定義數(shù)據(jù)結(jié)構(gòu)
漸進式類型	不需要完全遷移到 TypeScript 也能獲得部分類型優(yōu)勢
代碼可維護性	接口修改只需改動一處定義

不同寫法的對比

	這種寫法	純 TypeScript 寫法	純 JavaScript 寫法
類型提示	? 完整類型提示	? 完整類型提示	? 無
運行時校驗	? Vue 會校驗 Object 類型	? 需額外配置	? 標準校驗
默認值支持	? 直接通過 default 設(shè)置	? 需要使用 withDefaults	? 原生支持
代碼復(fù)雜度	?? 中等	?? 簡潔（類型優(yōu)先）	?? 高（需自行維護類型約束）

為什么這樣寫？

平衡開發(fā)體驗：

獲得 TypeScript 的智能提示
保留 Vue 的運行時校驗安全網(wǎng)

漸進增強：

適合逐步將 JavaScript 項目遷移到 TypeScript
不需要一次性重寫所有類型

明確數(shù)據(jù)契約：

// 父組件使用時
<MyComponent 
  :apply-basic-info="{
    id: 123,           // ? 必須 number
    name: '張三',       // ? 必須 string
    status: 'pending',  // ? 必須是枚舉值
    createTime: new Date() // ? 必須 Date
  }"
/>

常見錯誤示例

// 錯誤1：缺少必填字段
props.applyBasicInfo.missingProp // ? TS 報錯：屬性不存在

// 錯誤2：類型不匹配
props.applyBasicInfo.id = "100" // ? TS 報錯：不能將 string 賦給 number

// 錯誤3：錯誤的值類型
<MyComponent :apply-basic-info="'字符串'" /> 
// ? Vue 控制臺警告：期望 Object，得到 String

在組件中的使用

<script setup>
// 獲得智能提示
const submit = () => {
  console.log(props.applyBasicInfo.id) // 正確：number 類型
  console.log(props.operateCommandType.toUpperCase()) // 正確：string 方法
}

// 類型安全操作
const statusLabel = computed(() => {
  switch(props.applyBasicInfo.status) {
    case 'pending': return '審批中';
    case 'approved': return '已通過';
    // case 'rejected' 會觸發(fā) TS 錯誤（如果接口中未定義）
  }
})
</script>

最佳實踐建議

保持接口同步：當 ApplyBasicInfo 類型修改時，需要同步更新所有使用它的組件

默認值處理：對于復(fù)雜對象 prop，建議：

// 使用解構(gòu)默認值
const { applyBasicInfo = DEFAULT_INFO } = toRefs(props)

文檔注釋：在接口定義處添加詳細注釋

interface ApplyBasicInfo {
  /** 申請ID，唯一標識 */
  id: number;
  /** 申請人姓名 */
  name: string;
  // ...
}

這種寫法特別適合需要逐步引入 TypeScript 的 Vue 項目，既能享受類型系統(tǒng)的優(yōu)勢，又不會完全顛覆原有的開發(fā)模式。

3.3、與3.1等效的TypeScript 的類型聲明寫法

import { toRefs } from "vue";
import type { ApplyBasicInfo } from "@/interface";

const props = defineProps<{
  applyBasicInfo: ApplyBasicInfo;
  operateCommandType: string;
}>();

這段代碼是 Vue 3 組合式 API 中使用 TypeScript 的類型聲明寫法，主要用于定義組件的 props。讓我們分步詳細解釋：

defineProps 的作用：

這是 Vue 3 的組合式 API 函數(shù)，用于聲明組件接收的 props
類似于選項式 API 中的 props 選項，但更符合組合式 API 的編程風(fēng)格

泛型參數(shù) <...>：

這是 TypeScript 的泛型語法，用于為 defineProps 提供類型注解
泛型參數(shù)中定義了一個對象類型，描述了這個組件接收的所有 props 及其類型

props 具體定義：

{
  applyBasicInfo: ApplyBasicInfo;
  operateCommandType: string;
}

a) applyBasicInfo：

b) operateCommandType：

聲明了組件需要接收兩個 props：
類型為 ApplyBasicInfo（這應(yīng)該是一個自定義的 TypeScript 類型/接口）
可能是一個包含申請基本信息的對象，比如：

interface ApplyBasicInfo {
  id: number;
  applicantName: string;
  applyDate: Date;
  // ...其他字段
}

類型為 string
可能用于表示操作命令類型，比如："create"、"edit"、"view" 等字符串枚舉值

最終結(jié)果：

{
  applyBasicInfo: { /* 具體數(shù)據(jù) */ },
  operateCommandType: "edit" // 示例值
}

定義了一個名為 props 的常量
該常量包含兩個響應(yīng)式屬性：

在組件中的使用：

// 父組件使用
<ChildComponent 
  :applyBasicInfo="myApplyInfo" 
  operateCommandType="edit"
/>

// 子組件內(nèi)使用
console.log(props.applyBasicInfo.applicantName)
console.log(props.operateCommandType)

類型檢查：

如果父組件傳遞錯誤類型的 prop，TypeScript 會給出編譯時錯誤
例如：傳遞數(shù)字類型的 operateCommandType 會報錯

對比 JavaScript 版本：

如果是純 JavaScript，等效寫法可能是：

const props = defineProps({
  applyBasicInfo: {
    type: Object,
    required: true
  },
  operateCommandType: {
    type: String,
    default: 'view'
  }
})

注意事項：

需要確保 ApplyBasicInfo 類型已經(jīng)在項目中定義（通常是在獨立的類型聲明文件中）
這種寫法需要 Vue 3.3+ 版本支持
如果不需要 TypeScript 類型檢查，可以使用運行時聲明方式
這種寫法默認 props 都是 required 的，如果需要可選參數(shù)，應(yīng)該使用 propName?: Type 的語法

實例代碼

<script setup lang="ts" name="ApplySampleOtherTable">

// 1、數(shù)組寫法
const props = defineProps(["applySampleData", "applySampleTableScrollTop", "operateCommandType"]);
</script>

<script setup lang="ts" name="ApplySampleOtherTable">

// 2、對象寫法
const props = defineProps({
  applySampleData: {
    type: Object, // 要求必須是 Object 類型
    required: true // 表示父組件必須傳遞這個prop，不能與 default 同時使用
  },
  applySampleTableScrollTop: {
    type: Number, // 要求必須是 Number 類型
    default: 0 // 表示當父組件沒有傳遞時使用默認值，不能與 required 同時使用
  },
  operateCommandType: {
    type: String, // 要求必須是 String 類型
    default: "info-add" // 表示當父組件沒有傳遞時使用默認值，不能與 required 同時使用
  }
});
</script>

<script setup lang="ts" name="ApplySampleOtherTable">
import type { ApplySample } from "@/interface";
import type { PropType } from "vue";

// 3、TypeScript 的類型聲明寫法1：使用標準的PropType進行對象類型定義
const props = defineProps({
  applySampleData: {
    type: Object as PropType<ApplySample[]>, // 要求必須是 Object 類型，類型為ApplySample[]
    required: true // 表示父組件必須傳遞這個prop，不能與 default 同時使用
  },
  applySampleTableScrollTop: {
    type: Number, // 要求必須是 Number 類型
    default: 0 // 表示當父組件沒有傳遞時使用默認值，不能與 required 同時使用
  },
  operateCommandType: {
    type: String, // 要求必須是 String 類型
    default: "info-add" // 表示當父組件沒有傳遞時使用默認值，不能與 required 同時使用
  }
});
</script>

<script setup lang="ts" name="ApplySampleOtherTable">
import type { ApplySample } from "@/interface";

// 4、TypeScript 的類型聲明寫法2：結(jié)合了 Vue 的運行時 props 校驗和 TypeScript 類型提示的混合寫法
const props = defineProps({
  applySampleData: {
    type: Object as () => ApplySample[], // 要求必須是 Object 類型，類型為ApplySample[]，使用箭頭函數(shù)返回類型
    required: true // 表示父組件必須傳遞這個prop，不能與 default 同時使用
  },
  applySampleTableScrollTop: {
    type: Number, // 要求必須是 Number 類型
    default: 0 // 表示當父組件沒有傳遞時使用默認值，不能與 required 同時使用
  },
  operateCommandType: {
    type: String, // 要求必須是 String 類型
    default: "info-add" // 表示當父組件沒有傳遞時使用默認值，不能與 required 同時使用
  }
});
</script>

<script setup lang="ts" name="ApplySampleOtherTable">
import type { ApplySample } from "@/interface";

// 5、TypeScript 的類型聲明寫法3：vue3的寫法，不設(shè)置默認值
const props = defineProps<{
  applySampleData: ApplySample[];
  applySampleTableScrollTop: number;
  operateCommandType: string;
}>();
</script>

<script setup lang="ts" name="ApplySampleOtherTable">
import type { ApplySample } from "@/interface";

// 6、TypeScript 的類型聲明寫法3：vue3的寫法，設(shè)置默認值
const props = withDefaults(
  // withDefaults 是 Vue3 提供的一個工具函數(shù)，專門用于處理類型聲明的 props 默認值。
  defineProps<{
    applySampleData: ApplySample[];
    applySampleTableScrollTop: number;
    operateCommandType: string;
  }>(),
  {
    // 數(shù)組類型，使用工廠函數(shù)返回默認值
    applySampleData: () => [],
    // 數(shù)字類型，使用默認值
    applySampleTableScrollTop: 0,
    // 字符串類型，使用默認值
    operateCommandType: "info-add"
  }
);
</script>

在 Vue 3 的 <script setup> 語法中，當使用 withDefaults 為對象類型的 prop 設(shè)置默認值時，必須使用工廠函數(shù)返回默認對象（用箭頭函數(shù) () => {} ），這是 Vue 設(shè)計層面的強制要求，主要目的是避免多個組件實例共享同一個對象引用的問題。

<script setup lang="ts" name="CommonApplyItemTable">
import type { ApplyItem } from "@/interface";

const props = withDefaults(
  defineProps<{
    // 受理項目列表
    applyItemList: ApplyItem[];
    // 受理模式，1：樣品檢相同項目；2：樣品檢不同項目
    dataType: 1 | 2;
    // 操作指令類型：新增刪除：info-new；修改：info-modify；查看：info-view
    operateCommandType: "info-add" | "info-modify" | "info-view";
  }>(),
  {
    applyItemList: () => {
      let applyItemList: ApplyItem[] = [];
      return applyItemList;
    },
    dataType: 1,
    operateCommandType: "info-view"
  }
);
</script>

<script setup lang="ts" name="CommonApplyBasicInfoForm">
import type { ApplyBasicInfo, ApplyBasicInfoOperateCommandType } from "@/interface";

const props = withDefaults(
  defineProps<{
    // 受理基礎(chǔ)信息
    applyBasicInfo: ApplyBasicInfo;
    // 操作指令類型
    operateCommandType: ApplyBasicInfoOperateCommandType;
  }>(),
  {
    // 對象類型，使用工廠函數(shù)返回默認值
    applyBasicInfo: () => {
      return {
        id: 0,
        verifyType: null,
        verifyTypeName: "",
        outerApplyId: "",
        acceptType: "",
        acceptTypeName: "",
        acceptDate: "",
        acceptGroupId: null,
        acceptGroupName: "",
        acceptPerson: "",
        acceptPersonName: "",
        reportDate: "",
        wspjType: 0,
        sjdwName: "",
        sjdwAddress: "",
        sjdwRegion: "",
        cydwName: "",
        cydwAddress: "",
        cyDate: "",
        cyPerson: "",
        cyType: "",
        wsdwName: "",
        wsdwAddress: "",
        wsPerson: "",
        lxPerson: "",
        lxPhone: "",
        email: "",
        payType: "",
        createTime: ""
      };
    },
    // 字符串類型，使用默認值
    operateCommandType: "info-view"
  }
);

總結(jié)

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

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue3中defineProps的使用詳解

目錄

1、數(shù)組寫法

代碼含義

關(guān)鍵特性分析

與其他聲明方式的對比

潛在風(fēng)險示例

為什么要用這種寫法？

如何改進？

最佳實踐建議

2、對象寫法（純 JavaScript 項目的寫法，運行時 props 聲明）

3、TypeScript 的類型聲明寫法

3.1、使用標準的PropType進行對象類型定義

關(guān)鍵概念拆解

工作原理圖示

為什么要這樣寫？

在組件中的實際使用

常見錯誤及解決方案

不同技術(shù)棧的寫法對比

最佳實踐建議

3.2、混合寫法（結(jié)合了 Vue 的運行時 props 校驗和 TypeScript 類型提示的混合寫法）

代碼結(jié)構(gòu)解析

關(guān)鍵部分詳解

代碼特點

不同寫法的對比

為什么這樣寫？

常見錯誤示例

在組件中的使用

最佳實踐建議

3.3、與3.1等效的TypeScript 的類型聲明寫法

實例代碼

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue3中defineProps的使用詳解

目錄

1、數(shù)組寫法

代碼含義

關(guān)鍵特性分析

與其他聲明方式的對比

潛在風(fēng)險示例

為什么要用這種寫法？

如何改進？

最佳實踐建議

2、對象寫法（純 JavaScript 項目的寫法，運行時 props 聲明）

3、TypeScript 的類型聲明寫法

3.1、使用標準的PropType進行對象類型定義

關(guān)鍵概念拆解

工作原理圖示

為什么要這樣寫？

在組件中的實際使用

常見錯誤及解決方案

不同技術(shù)棧的寫法對比

最佳實踐建議

3.2、混合寫法（結(jié)合了 Vue 的運行時 props 校驗和 TypeScript 類型提示的混合寫法）

代碼結(jié)構(gòu)解析

關(guān)鍵部分詳解

代碼特點

不同寫法的對比

為什么這樣寫？

常見錯誤示例

在組件中的使用

最佳實踐建議

3.3、與3.1等效的TypeScript 的類型聲明寫法

實例代碼

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

1、數(shù)組寫法

為什么要用這種寫法？

2、對象寫法（純 JavaScript 項目的寫法，運行時 props 聲明）

3.1、使用標準的PropType進行對象類型定義

為什么這樣寫？

3.3、與3.1等效的TypeScript 的類型聲明寫法