- 正确答案：在前端框架如Vue或React中，父子组件通信是通过特定的机制实现的。父组件向子组件传递数据使用“props”，子组件向父组件传递信息则通过“事件触发”（如自定义事件或回调函数）。此外，还可以借助状态管理工具或引用等方式实现更复杂的通信。 - 解答思路：首先明确“父子组件”的概念——一个组件在模板中渲染另一个组件，形成层级关系。通信分为两个方向：向下（父→子）和向上（子→父）。对于向下通信，使用 props 是最直接的方式；对于向上通信，由于组件间不应直接修改父级状态，因此通过事件机制通知父组件进行处理。理解这两个方向的数据流有助于构建可维护的组件体系。 - 深度知识讲解： 1. **Props（属性传递）**： - Props 是父组件向子组件传递数据的只读属性。子组件不能直接修改 props，否则会破坏单向数据流原则，导致难以追踪的状态变化。 - 在Vue中，props是响应式的，当父组件的数据更新时，子组件接收到的props也会自动更新。 - 在React中，props也是不可变的，每次父组件重新渲染时，新的props会被传入子组件，触发其重新渲染。 - 类型检查：Vue支持对props进行类型、默认值、是否必填等校验；React可通过PropTypes或TypeScript实现类似功能。 2. **事件通信（子→父）**： - Vue中使用 $emit 触发自定义事件。父组件通过 v-on 监听该事件，并绑定处理函数。示例：子组件调用 this.$emit('update', value) 父组件写为 - React中通过“回调函数”实现。父组件将函数作为props传递给子组件，子组件在需要时调用该函数。示例：父组件传入 onIncrement={(val) => this.handleInc(val)} 子组件执行 props.onIncrement(data) 3. **单向数据流原则**： - 所有状态提升到父组件或全局状态管理器，保证数据流向清晰，便于调试。 - 避免“反向数据流”（即子组件直接修改父组件数据），这会导致副作用和难以维护的代码。 4. **其他通信方式补充**： - **Refs（引用）**：父组件可通过 ref 直接访问子组件实例，调用其方法或访问属性。但应谨慎使用，避免破坏封装性。 Vue示例：，父组件通过 this.$refs.myChild 访问。 React示例：useRef + forwardRef 实现对子组件DOM或方法的访问。 - **Provide / Inject（Vue）或 Context（React）**：用于跨多层组件传递数据，适用于主题、语言等全局配置，但不推荐频繁变更的数据。 - **状态管理库**：如Vuex/Pinia（Vue）、Redux/Toolkit（React），适用于复杂应用中的全局状态共享。 5. **底层实现原理简析**： - 虚拟DOM与响应式系统：Vue通过Object.defineProperty或Proxy监听数据变化，当props更新时，触发子组件的重新渲染。 - React基于函数式编程思想，每次状态变化都会重新执行函数组件，结合Diff算法决定是否更新真实DOM。 - 事件机制本质是观察者模式：Vue的$on/$emit基于事件中心；React的事件是合成事件，统一由顶层代理处理。 - 代码示例（Vue）： ``` // 子组件 Child.vue export default { props: ['message'], methods: { notifyParent() { this.$emit('custom-event', 'Hello from child') } }, template: `

` } // 父组件 Parent.vue export default { data() { return { childMsg: '' } }, methods: { handleEvent(value) { this.childMsg = value } }, template: `

Received: {{ childMsg }}

` } ``` - 代码示例（React）： ``` // 子组件 Child.js function Child({ message, onSend }) { const handleClick = () => { onSend('Hello from child') } return (

{message}

) } // 父组件 Parent.js class Parent extends React.Component { constructor(props) { super(props) this.state = { received: '' } } handleSend = (data) => { this.setState({ received: data }) } render() { return (

Received: {this.state.received}

) } } ``` - 扩展知识点： - **受控组件 vs 非受控组件（React）**：受控组件通过props和回调完全由父组件控制，而非受控组件内部维护state，适合表单项较多且独立的场景。 - **v-model 原理（Vue）**：本质是 :value + @input 的语法糖，可用于组件上实现双向绑定。 - **性能优化**：避免不必要的重渲染，React可用React.memo，Vue可使用v-once或计算属性缓存。 - **TypeScript集成**：为props定义接口，增强类型安全。例如：interface ChildProps { message: string; onSend: (text: string) => void }

淘天前端秋招

全站热榜

创作者周榜