17370845950

父子组件通信核心是父传子用props、子传父用事件。Vue中父用:prop传递、子用props声明；React中父用属性传、子解构接收。子组件通过$emit（Vue）或回调函数（React）通知父组件更新，严禁直接修改props，以保持单向数据流清晰。

父子组件通信是 JavaScript（尤其是 Vue、React 等框架）中非常基础又关键的一环。核心思路很清晰：父传子靠 属性（props），子传父靠 事件（event）。下面以通用逻辑为主，兼顾 Vue 和 React 的典型写法，不绑定某一个框架，讲清楚本质。

父组件向子组件传数据：用 props 传递

父组件把数据作为属性“喂”给子组件，子组件通过声明接收并使用。这是单向的、只读的数据流。

• Vue 中：父组件模板里写 ，子组件用 props: ['message', 'count'] 或对象形式声明接收
• React 中：父组件写 ，子组件函数组件直接通过参数解构 function Child({ message, count })
• 注意 props 是响应式的（Vue）或不可变的（React），子组件不能直接修改，要改就得通知父组件

子组件向父组件传数据：触发事件通知

子组件不能直接改父的数据，而是“喊一嗓子”，让父组件自己去更新。这个“喊”就是触发自定义事件（Vue）或回调函数（React）。

• Vue 中：子组件内部调用 this.$emit('updateCount', newValue)，父组件监听：，然后在 handleUpdate 里更新自己的 data
• React 中：父组件传一个函数下去，比如 ，子组件里调用 this.props.onConfirm(data) 即可
• 常见场景如表单提交、按钮点击、输入框变化（v-model / onChange 本质也是这种模式的封装）

避免反向修改，保持数据流清晰

直接在子组件里改 props 会报错（Vue 警告 / React 不生效），这不是 bug，而是设计原则。一旦打破单向数据流，调试和维护成本会陡增。

• 如果子组件需要“编辑”某个 prop，正确做法是：父组件提供初始值 + 更新方法，子组件触发方法来同步状态
• 例如实现一个可编辑的用户名显示组件，父组件管理 userName，子组件只负责展示+输入+触发 @change 事件
• 复杂表单或多层嵌套时，可以考虑用状态管理（如 Vuex/Pinia/Redux）或 Context API，但简单父子通信无需过度设计

补充：ref 和 provide/inject 不是常规通信方式

ref 主要用于获取子组件实例或 DOM 元素，适合调用子组件方法（比如子组件有个 focus() 方法），但不是传数据的正道；provide/inject 更适合跨多层的“祖先-后代”依赖注入，比如主题、配置，不推荐用于普通父子通信。

基本上就这些。看似简单，但理清 props → event 这条线，90% 的父子交互就稳了。