js实现父子传值
父子组件传值方法
在JavaScript框架中（如React、Vue等），父子组件传值是常见需求。以下是几种典型实现方式：
父传子（Props）
父组件通过属性向子组件传递数据，子组件通过props接收：
// 父组件
<ChildComponent message="Hello from parent" />
// 子组件
function ChildComponent(props) {
return <div>{props.message}</div>;
}子传父（回调函数）
父组件通过传递回调函数给子组件，子组件调用该函数传值：
// 父组件
function handleChildData(data) {
console.log(data);
}
<ChildComponent onDataSend={handleChildData} />
// 子组件
function ChildComponent({ onDataSend }) {
const sendData = () => onDataSend("Child data");
return <button onClick={sendData}>Send</button>;
}Context API
跨层级组件传值可使用Context：
const MyContext = React.createContext();
// 父组件
<MyContext.Provider value={{ data }}>
<ChildComponent />
</MyContext.Provider>
// 子组件
function ChildComponent() {
const context = useContext(MyContext);
return <div>{context.data}</div>;
}事件总线
通过自定义事件实现通信：
// 创建事件总线
const eventBus = new EventEmitter();
// 子组件发送事件
eventBus.emit("dataEvent", { payload: "data" });
// 父组件监听
eventBus.on("dataEvent", (data) => {
console.log(data);
});Refs引用
父组件通过ref直接访问子组件方法：
// 子组件暴露方法
useImperativeHandle(ref, () => ({
sendData: () => "data"
}));
// 父组件调用
const childRef = useRef();
childRef.current.sendData();注意事项
- 单向数据流原则：避免子组件直接修改父组件props
- 性能优化：避免不必要的重新渲染
- 类型检查：使用PropTypes或TypeScript确保数据类型安全
不同框架实现细节略有差异，但核心思路相通。选择合适方法需根据具体场景和技术栈决定。
