当前位置：首页 > JavaScript

js实现父子传值

2026-04-04 18:50:35JavaScript

父子组件传值方法

在JavaScript框架中（如React、Vue等），父子组件传值是常见需求。以下是几种主流实现方式：

Props向下传递（父→子）

父组件通过属性将数据传递给子组件，子组件通过props接收：

js实现父子传值

// 父组件
<ChildComponent message="Hello from parent" />

// 子组件
function ChildComponent(props) {
  return <div>{props.message}</div>;
}

回调函数向上传递（子→父）

子组件通过调用父组件传递的函数来传值：

// 父组件
function handleChildData(data) {
  console.log(data);
}

<ChildComponent onData={handleChildData} />

// 子组件
function ChildComponent({ onData }) {
  const sendData = () => onData("Child data");
  return <button onClick={sendData}>Send</button>;
}

Context API跨层级传值

适用于深层嵌套组件传值：

js实现父子传值

const MyContext = React.createContext();

// 父组件
<MyContext.Provider value={{ data, setData }}>
  <ChildComponent />
</MyContext.Provider>

// 任意子组件
function ChildComponent() {
  const { data } = useContext(MyContext);
  return <div>{data}</div>;
}

自定义事件传值

DOM环境下可通过自定义事件实现：

// 父元素
document.getElementById('parent').addEventListener('customEvent', (e) => {
  console.log(e.detail);
});

// 子元素
const event = new CustomEvent('customEvent', { detail: 'Data' });
document.getElementById('parent').dispatchEvent(event);

Refs直接访问（React）

父组件通过ref直接调用子组件方法：

// 子组件（需使用类组件）
class ChildComponent extends React.Component {
  sendData() {
    this.props.onData("Child data");
  }
}

// 父组件
const childRef = useRef();

<ChildComponent ref={childRef} />
<button onClick={() => childRef.current.sendData()}>Get Data</button>