Vue中Props与Emits构成单向数据流：子组件通过defineProps接收父组件数据并禁止修改，通过defineEmits触发事件通知父组件更新；需校验类型、设默认值，并防范引用类型意外修改。
一、理解 Props 与 Emits 的单向数据流本质
如果您在 Vue 组件中尝试实现父子间数据交互，却发现子组件修改后父组件状态未更新或控制台出现警告，则很可能是违背了 Vue 的单向数据流设计原则。以下是围绕 Props（父传子）与 Emits（子传父）机制展开的核心操作路径：
二、使用 Props 接收父组件数据
Props 是子组件显式声明的输入接口，用于接收父组件通过属性绑定传递的值。Vue 要求子组件必须提前声明所接收的 props，否则该属性不会被响应式追踪，也无法在模板中使用。
1、在子组件的 setup() 函数中通过 defineProps() 声明接收的 prop 名称或类型对象。
2、若使用 Options API，在 export default 配置对象中添加 props: ['title', 'count'] 或更严格的对象形式定义。
立即学习“前端免费学习笔记（深入）”；
3、在模板中直接以 {{ title }} 方式访问传入的值，不可对其执行赋值操作。
三、通过 Emits 触发自定义事件向父组件反馈
Emits 是子组件主动通知父组件发生特定行为的唯一合规方式。它不修改父组件数据，而是将意图和载荷以事件形式抛出，由父组件决定是否以及如何响应。
1、在子组件中调用 emit('update-title', newTitle)，其中第一个参数为事件名，后续参数为传递的数据。
2、在子组件 setup 中需先通过 const emit = defineEmits(['update-title']) 显式声明可触发的事件列表。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
3、父组件在使用子组件时，以 @update-title="handleUpdate" 的语法监听该事件，并在 methods 或 setup 中定义处理函数。
四、实现响应式 Props 校验与默认值设定
为提升组件健壮性与协作效率，Props 应支持类型约束、必填校验及默认值回退机制。未声明的类型或缺失的 required 配置可能导致运行时异常或隐式错误。
1、在 defineProps 中传入对象，如 { title: { type: String, required: true }, count: { type: Number, default: 0 } }。
2、对复杂结构启用 validator 函数，例如 validator: value => ['primary', 'secondary'].includes(value)。
3、注意：当设置 default 时，若 type 为引用类型（Object/Array），必须用工厂函数返回，如 default: () => ({})。
五、规避 Props 内部属性被意外修改的风险
JavaScript 的引用传递特性使得即使 props 声明为只读，仍可能在子组件中修改其嵌套对象或数组的内部字段。这种修改虽不报错，但会破坏单向数据流，造成父组件状态不可控。
1、检测到 props.user.name = 'Alice' 类写法时，应立即重构为 emit('update-user', { ...props.user, name: 'Alice' })。
2、对深层嵌套对象，可在 onMounted 或 watch 中使用 structuredClone(props.obj) 创建隔离副本用于本地操作。
3、推荐在组合式 API 中配合 toRefs(props) 解构，避免意外丢失响应性连接。
