defineProps 简要介绍

📋 一句话概括

defineProps 是 Vue 3 组合式 API 中定义组件 Props 的编译时宏。

🎯 核心作用

用于在 <script setup> 中声明组件的 Props，替代 Vue 2 的 props 选项。

📝 基本语法

<script setup>
// 定义 Props
const props = defineProps<{
  title: string
  count?: number
}>()

// 使用
console.log(props.title)  // 类型安全的访问
</script>

🔧 三种写法

1. 泛型接口（推荐，TypeScript）

//1. 定义 接口 Props
interface Props {
  visible: boolean
  title: string
}

//2. 定义 Props 的实例props
const props = defineProps<Props>()

//3. 使用. 通过 实例props 访问
console.log(props.title) //类型安全的访问

2. 运行时声明（JavaScript）

const props = defineProps({
  visible: { type: Boolean, required: true },
  title: { type: String, default: '默认标题' }
})

3. 混合使用

const props = defineProps({
  // 运行时验证
  count: { type: Number, default: 0 }
})

⚡ 主要特点

优点

• ✅ 类型安全：完整的 TypeScript 支持
• ✅ 编译时处理：无运行时开销
• ✅ 简洁语法：比 Vue 2 更简洁
• ✅ 自动推导：模板中自动解包

限制

• ❌ 只读：不能直接修改 Props
• ❌ 编译时宏：只能在 <script setup> 中使用
• ❌ 无默认值：需要配合 withDefaults

🔄 与 Vue 2 对比

📦 实际示例

<!-- 父组件使用 -->
<ChildComponent 
  title="设备列表" 
  :count="10" 
  :visible="true"
/>

<!-- 子组件定义 -->
<script setup lang="ts">
// 定义 Props
interface Props {
  title: string
  count?: number
  visible: boolean
}

const props = defineProps<Props>()

// 使用
const displayTitle = computed(() => {
  return `${props.title} (${props.count ?? 0})`
})
</script>

<template>
  <div v-if="props.visible">
    {{ displayTitle }}
  </div>
</template>

🎓 记住这几点

1. 只在 <script setup> 中使用
2. 返回的 props 是只读的
3. 配合 TypeScript 效果最佳
4. 需要默认值就用 withDefaults
5. 编译时转换为标准 props 选项

💡 使用场景

• 组件间数据传递
• 配置组件行为
• 表单组件的数据绑定
• 通用组件的参数传递

这就是 defineProps 的核心要点！它是 Vue 3 组合式 API 的基础，让组件 Props 的定义更加类型安全和简洁。