在 Vue 3 中，defineProps 和 defineEmits 是组合式 API 的核心功能，用于处理父子组件之间的传值和事件通信。

1. defineProps

defineProps 用于定义并接收父组件传递过来的数据（props）。它是在子组件中使用的，接收的数据可以是各种类型。

// 子组件
<template>
  <div>
    <h1>title：{{ title }}</h1>
    <p>count：{{ count }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

// 接收父组件传递的 props
const props = defineProps({
  title: String,
  count: Number
})
</script>

// 父组件
<template>
  <Child title="Hello, World!" :count="10" />
</template>

<script setup>
import Child from './Child.vue';
</script>

2. defineEmits

defineEmits 用于定义并触发子组件向父组件发送的事件。父组件可以通过监听这些事件来执行相应的操作。

<!-- 父组件 -->
<template>
  <Child @update="handleUpdate" />
</template>

<script setup>
import Child from './Child.vue';

// 处理子组件传来的事件
const handleUpdate = (value) => {
  console.log('Updated value from child:', value);
};
</script>

<!-- 子组件 -->
<template>
  <button @click="sendUpdate">Click to Update</button>
</template>

<script setup>
import { defineEmits } from 'vue';

// 定义事件
const emit = defineEmits(['update']);

const sendUpdate = () => {
  emit('update', 'new value'); // 触发 update 事件并传递参数
};
</script>

3. 使用 TypeScript 定义类型

在 Vue 3 中结合 TypeScript 时，defineProps 和 defineEmits 可以使用更严格的类型检查，提升代码的健壮性。

// 子组件
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

// 定义 props 的类型
const props = defineProps<{
  title: string;
  count: number;
}>();

// 定义 emit 的事件和类型
const emit = defineEmits<{
  (event: 'update', newTitle: string): void;
}>();

const updateTitle = () => {
  emit('update', 'New Title with TS'); // 触发事件并传递参数
};
</script>