Vue3 组件通信（defineProps 和 defineEmits ）
defineProps 和 defineEmits 这两个是 Vue 3 中 <script setup>语法糖特有的 "编译宏" ，专门用于组件通信（父→子、子→父），是组合式 API 里定义props和自定义事件的标准方式，不用手动导入，直接在<script setup>中使用。
1. defineProps：定义组件的 "入参（父传子数据）"
作用是声明当前组件接收的 props（父组件传递给子组件的数据），同时支持类型校验、默认值等配置，让子组件明确能接收哪些数据。
基础用法（示例）：
javascript
<!-- 子组件 Child.vue -->
<script setup>
// 声明接收的props：类型+默认值
const props = defineProps({
// 接收父组件传递的title，类型是字符串
title: {
type: String,
required: true // 必传
},
// 接收父组件传递的count，类型是数字，默认值0
count: {
type: Number,
default: 0
}
});
// 直接使用props里的数据
console.log(props.title); // 父组件传递的title
</script>
<template>
<div>{{ title }} - 数量：{{ count }}\</div>
</template>父组件如何传递：
javascript
<!-- 父组件 Parent.vue -->
<template>
<!-- 向子组件传递title和count -->
<Child title="我是父组件传递的标题" :count="10" />
</template>2. defineEmits：定义组件的 "自定义事件（子传父通信）"
作用是声明当前组件可以触发的自定义事件 ，子组件通过emit触发事件，父组件监听事件并接收子组件传递的数据，实现 "子→父" 的通信。
基础用法（示例）：
javascript
<!-- 子组件 Child.vue -->
<script setup>
// 声明当前组件支持的自定义事件（数组形式：事件名列表）
const emit = defineEmits(\['changeCount', 'submit']);
// 子组件内部触发事件，并传递数据给父组件
const handleClick = () => {
// 触发changeCount事件，传递参数10
emit('changeCount', 10);
};
const handleSubmit = () => {
// 触发submit事件，传递表单数据
emit('submit', { name: '测试' });
};
</script>
<template>
<button @click="handleClick">修改数量\</button>
<button @click="handleSubmit">提交\</button>
</template>父组件如何监听：
javascript
<!-- 父组件 Parent.vue -->
<template>
<!-- 监听子组件的changeCount和submit事件 -->
<Child
title="测试标题"
@changeCount="newCount => console.log('子组件传递的数量：', newCount)"
@submit="formData => console.log('子组件提交的表单：', formData)"
/>
</template>核心总结
| 函数名 | 作用 | 通信方向 | 场景 |
|---|---|---|---|
defineProps |
声明组件接收的 props | 父→子 | 父组件给子组件传数据 |
defineEmits |
声明组件可触发的自定义事件 | 子→父 | 子组件向父组件传递数据 / 通知 |