Vue3组件通信：defineProps与defineEmits实战指南

1. Vue3 组件通信基础与核心概念

在Vue3的组件化开发中，组件通信始终是构建复杂应用的关键环节。相比Vue2的options API，Vue3的composition API带来了全新的通信方式，其中defineProps和defineEmits这两个编译器宏函数成为了props和events通信的标准方案。

我刚开始接触Vue3时，曾困惑于为什么需要改变原有的props和$emit写法。经过多个项目的实践后发现，这种改变不仅仅是语法上的调整，更是对类型安全和开发体验的重大提升。在TypeScript项目中，defineProps和defineEmits能提供完整的类型推断，这是旧写法难以企及的优势。

2. defineProps 详解与实战应用

2.1 defineProps 的基本用法

defineProps用于声明组件接收的props，它在<script setup>中直接可用，无需额外导入。一个典型的props声明如下：

vue复制<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})
</script>

这里有几个关键点需要注意：

1. defineProps的返回值是一个响应式对象，可以直接在模板中使用
2. 每个prop都可以配置类型(type)、必填(required)和默认值(default)
3. 在模板中可以直接使用prop名，无需通过props对象访问

重要提示：虽然可以直接使用prop名，但在script部分建议始终通过props对象访问，以保持一致性并避免潜在的命名冲突。

2.2 类型安全的进阶用法

在TypeScript项目中，我们可以使用纯类型声明的方式来定义props，这能提供更完善的类型检查：

typescript复制interface Props {
  title: string
  count?: number
  items?: string[]
}

const props = defineProps<Props>()

这种写法的优势非常明显：

• 类型定义更加直观和集中
• 编辑器能提供更好的代码补全和类型检查
• 不需要重复声明类型信息（type和TS类型只需定义一次）

2.3 props 的响应式特性与注意事项

props本质上是响应式的，但有一些特殊行为需要注意：

1. 解构会失去响应性：直接解构props会导致响应性丢失

   javascript复制// 错误做法 - 解构会失去响应性
   const { title } = defineProps(['title'])
   
   // 正确做法 - 通过props对象访问
   const pr