父子组件通信核心是父传子用props、子传父用事件。Vue中父用:prop传递、子用props声明；React中父用属性传、子解构接收。子组件通过$emit（Vue）或回调函数（React）通知父组件更新，严禁直接修改props，以保持单向数据流清晰。
父子组件通信是 JavaScript（尤其是 Vue、React 等框架）中非常基础又关键的一环。核心思路很清晰：父传子靠 属性（props），子传父靠 事件（event）。下面以通用逻辑为主，兼顾 Vue 和 React 的典型写法，不绑定某一个框架，讲清楚本质。
父组件向子组件传数据：用 props 传递
父组件把数据作为属性“喂”给子组件，子组件通过声明接收并使用。这是单向的、只读的数据流。
- Vue 中：父组件模板里写
<ChildComponent :message="parentMsg" :count="num" />，子组件用props: ['message', 'count']或对象形式声明接收 - React 中：父组件写
<Child message={this.state.msg} count={this.state.num} />，子组件函数组件直接通过参数解构function Child({ message, count }) - 注意 props 是响应式的（Vue）或不可变的（React），子组件不能直接修改，要改就得通知父组件
子组件向父组件传数据：触发事件通知
子组件不能直接改父的数据，而是“喊一嗓子”，让父组件自己去更新。这个“喊”就是触发自定义事件（Vue）或回调函数（React）。
- Vue 中：子组件内部调用
this.$emit('updateCount', newValue)，父组件监听：<Child @updateCount="handleUpdate" />，然后在handleUpdate里更新自己的 data - React 中：父组件传一个函数下去，比如
<Child onConfirm={this.handleConfirm} />，子组件里调用this.props.onConfirm(data)即可 - 常见场景如表单提交、按钮点击、输入框变化（v-model / onChange 本质也是这种模式的封装）
避免反向修改，保持数据流清晰
直接在子组件里改 props 会报错（Vue 警告 / React 不生效），这不是 bug，而是设计原则。一旦打破单向数据流，调试和维护成本会陡增。
立即学习“Java免费学习笔记（深入）”；
- 如果子组件需要“编辑”某个 prop，正确做法是：父组件提供初始值 + 更新方法，子组件触发方法来同步状态
- 例如实现一个可编辑的用户名显示组件，父组件管理
userName，子组件只负责展示+输入+触发@change事件 - 复杂表单或多层嵌套时，可以考虑用状态管理（如 Vuex/Pinia/Redux）或 Context API，但简单父子通信无需过度设计
补充：ref 和 provide/inject 不是常规通信方式
ref 主要用于获取子组件实例或 DOM 元素，适合调用子组件方法（比如子组件有个 focus() 方法），但不是传数据的正道；provide/inject 更适合跨多层的“祖先-后代”依赖注入，比如主题、配置，不推荐用于普通父子通信。
基本上就这些。看似简单，但理清 props → event 这条线，90% 的父子交互就稳了。
