vue父子组件通信遵循单向数据流：父组件通过props传值（只读，支持校验与默认值），子组件通过emit触发事件通知父组件更新；v-model是props+emit的语法糖，本质仍是单向流动。
Vue 中父子组件通信的核心是单向数据流：父组件通过 props 向子组件传值，子组件通过 emit 触发事件通知父组件更新。状态同步不是“自动双向”，而是靠明确的数据流向和事件响应来实现。
父传子：用 props 传递数据
这是最基础、最推荐的方式。父组件把数据作为属性绑定到子组件标签上，子组件用 defineProps（Vue 3）或 props 选项（Vue 2）声明接收。
- 支持类型校验、默认值、必填限制，比如：
title: { type: String, required: true } - 传对象或数组时，记得用函数返回默认值：
list: { type: Array, default: () => [] } - props 是只读的，子组件直接修改会触发警告，不能绕过规则去写
props.xxx = ...
子传父：用自定义事件回传数据
子组件不改父的数据，而是告诉父“我发生了什么”或“我需要你改成什么样”。父组件监听事件并更新自身响应式变量。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 子组件调用
const emit = defineEmits(['update'])声明事件，再用emit('update', newValue)触发 - 父组件用
@update="handleUpdate"接收，handleUpdate函数里更新自己的ref或reactive数据 - 常见模式是子组件内部有输入框或按钮，用户操作后主动通知父组件，比如搜索、提交、切换状态
v-model 简化双向绑定逻辑
它本质是 props + emit 的语法糖，让父子通信看起来更简洁，但底层仍是单向流动。
- 父组件写：
<child v-model:title="pageTitle"></child> - 子组件需接收
titleprop，并触发update:title事件，例如：@input="$emit('update:title', $event.target.value)" - 也可扩展多个 v-model，如
v-model:visible对应update:visible，适合模态框、表单等场景
避免常见误区
很多问题其实源于对单向数据流理解不到位或操作越界。
- 不要在子组件里直接修改 props，哪怕用
Object.assign或解构赋值“复制”后再改，也容易引发响应失效或难以追踪的 bug - 不要用
ref或computed在子组件里“反向绑定” props，这违背设计原则，后期维护成本高 - 当父子间频繁交互、逻辑复杂时，优先考虑抽离公共状态到
pinia或用provide/inject跨级共享，而不是强行堆砌 props/emits
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
