vue3中defineProps的使用详解

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

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

defineProps({
  applyBasicInfo: null,       // 无类型检查
  operateCommandType: null     // 无类型检查
})

<!-- 父组件 -->
<ChildComponent 
  :applyBasicInfo="任何类型的数据" <!-- 可以是对象、字符串、数字等 -->
  operateCommandType="任何内容"    <!-- 可以是任意类型 -->
/>

<!-- 子组件 -->
<script setup>
// 使用时需要自行确保类型正确
console.log(props.applyBasicInfo) // 可能是任意类型
</script>

<!-- 父组件传递错误类型 -->
<ChildComponent 
  :applyBasicInfo="123"        <!-- 传递数字 -->
  operateCommandType           <!-- 未传递 -->
/>

<!-- 子组件使用时 -->
<script setup>
// 可能引发运行时错误
props.applyBasicInfo.name      // 报错：数字没有 name 属性
props.operateCommandType       // 拼写错误也不会警告（正确是 operateCommandType）
</script>

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

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

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

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

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

const props = defineProps({
  applyBasicInfo: {
    type: Object, // 要求必须是 Object 类型
    required: true // 表示父组件必须传递这个prop，不能与 default 同时使用
  },
  operateCommandType: {
    type: String, // 要求必须是 String 类型
    default: "info-view" // 表示当父组件没有传递时使用默认值，不能与 required 同时使用
  }
});

// 简写方式（不推荐）
defineProps(['applyBasicInfo', 'operateCommandType'])

// vs 

// 当前对象写法（推荐）
defineProps({
  applyBasicInfo: { type: Object, required: true },
  operateCommandType: { type: String, default: "info-view" }
})

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 同时使用
  }
});

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

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

// 普通写法（只有 Vue 校验）
applyBasicInfo: {
  type: Object,  // 只知道是个对象，不清楚具体结构
  required: true
}

// 当前写法（Vue校验 + TS类型）
applyBasicInfo: {
  type: Object as PropType<ApplyBasicInfo>, // 明确对象结构
  required: true
}

graph TD
    A[父组件传递 props] --> B{Vue 运行时校验}
    B -->|通过| C[组件内使用]
    B -->|不通过| D[控制台警告]
    C --> E[TypeScript 类型检查]
    E -->|类型正确| F[正常开发]
    E -->|类型错误| G[IDE 提示错误]

// 假设在 @/interface 中
interface ApplyBasicInfo {
  id: number;          // 申请ID
  applicant: string;   // 申请人姓名
  status: 'pending' | 'approved'; // 申请状态
  createTime: Date;    // 创建时间
}

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

// 错误使用（立即报错）
props.applyBasicInfo.APPlicant   // ❌ 拼写错误提示
props.applyBasicInfo.status = 'rejected' // ❌ 类型不匹配

<template>
  <!-- 显示申请人信息 -->
  <div>{{ props.applyBasicInfo.applicant }}</div>
  
  <!-- 根据操作类型显示不同内容 -->
  <div v-if="operateCommandType === 'info-view'">
    查看模式
  </div>
</template>

// 错误提示：Cannot find name 'ApplyBasicInfo'
// 解决方案：确保类型文件正确定义并导出
// 在 @/interface.ts 中：
export interface ApplyBasicInfo { ... }

<!-- 父组件传递错误数据结构 -->
<MyComponent :apply-basic-info="{ id: '100' }" />
<!-- 错误：id 应该是 number -->

// 组件内使用时
const submit = () => {
  console.log(props.applyBasicInfo.createTime) // 如果接口中有该属性
}
// 当父组件传递的对象缺少 createTime 时，TS 会报错

interface ApplyBasicInfo {
  /**
   * 申请的唯一标识
   * @example 123456
   */
  id: number;
}

applyBasicInfo: {
  type: Object as PropType<ApplyBasicInfo>,
  required: true,
  validator: (value: ApplyBasicInfo) => {
    return !!value.id // 添加自定义校验逻辑
  }
}

// 对于复杂对象，建议提供默认值函数
applyBasicInfo: {
  type: Object as PropType<ApplyBasicInfo>,
  default: () => ({ id: 0, applicant: '', status: 'pending' })
}

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

const props = defineProps({
  applyBasicInfo: {
    type: Object as () => ApplyBasicInfo, // 使用箭头函数返回类型
    required: true // 表示父组件必须传递这个prop，不能与 default 同时使用
  },
  operateCommandType: {
    type: String,
    default: "info-view" // 表示当父组件没有传递时使用默认值，不能与 required 同时使用
  }
});

import type { ApplyBasicInfo } from "@/interface"; // 导入类型

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

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

// 假设在 @/interface 中
interface ApplyBasicInfo {
  id: number;
  name: string;
  status: 'pending' | 'approved';
  createTime: Date;
}

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

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

// 使用时可以获得类型提示
props.applyBasicInfo.id // 提示 number 类型
props.applyBasicInfo.name // 提示 string 类型

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

// 父组件使用时
<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' 会触发 TS 错误（如果接口中未定义）
  }
})
</script>

// 使用解构默认值
const { applyBasicInfo = DEFAULT_INFO } = toRefs(props)

interface ApplyBasicInfo {
  /** 申请ID，唯一标识 */
  id: number;
  /** 申请人姓名 */
  name: string;
  // ...
}

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

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

{
  applyBasicInfo: ApplyBasicInfo;
  operateCommandType: string;
}

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

{
  applyBasicInfo: { /* 具体数据 */ },
  operateCommandType: "edit" // 示例值
}

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

// 子组件内使用
console.log(props.applyBasicInfo.applicantName)
console.log(props.operateCommandType)

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

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

// 1、数组写法
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：结合了 Vue 的运行时 props 校验和 TypeScript 类型提示的混合写法
const props = defineProps({
  applySampleData: {
    type: Object as () => 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";

// 5、TypeScript 的类型声明写法3：vue3的写法，不设置默认值
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的写法，设置默认值
const props = withDefaults(
  // withDefaults 是 Vue3 提供的一个工具函数，专门用于处理类型声明的 props 默认值。
  defineProps<{
    applySampleData: ApplySample[];
    applySampleTableScrollTop: number;
    operateCommandType: string;
  }>(),
  {
    // 数组类型，使用工厂函数返回默认值
    applySampleData: () => [],
    // 数字类型，使用默认值
    applySampleTableScrollTop: 0,
    // 字符串类型，使用默认值
    operateCommandType: "info-add"
  }
);
</script>

<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<{
    // 受理基础信息
    applyBasicInfo: ApplyBasicInfo;
    // 操作指令类型
    operateCommandType: ApplyBasicInfoOperateCommandType;
  }>(),
  {
    // 对象类型，使用工厂函数返回默认值
    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"
  }
);