组件通讯

vue2

props/$emit;
provide/inject;
localstorage;
event bus
vuex;

vue3

pinia (库)

react >=16

props
redux
context
event bus(库);

react(hooks) 父调子

useRef => forwardRef/useImperativeHandle

useImperativeHandle[ɪmˈperətɪv ˈhænd(ə)l]

使用到的 hooks-- useImperativeHandle，useRef

//父组件
//需要引入useRef
import { useRef } from "react";
let Father = () => {
  const childRef = useRef();
  let onClick = () => {
    childRef.current.getInfo();
  };
  return () => {
    <div>
      <Children
      ref={childRef}
      {/* 如果子组件是包含了form表单实例那就要用 */}
      {/* wrappedComponentRef={childRef} */}
       />

      <span onClick={onClick}>调用子组件函数</span>
    </div>;
  };
};

//子组件:需要引入useImperativeHandle,forwardRef
import { useImperativeHandle, forwardRef } from "react";
let Children = (ref) => {
  useImperativeHandle(ref, () => ({
    getInfo: () => {
      //需要处理的数据
    },
  }));

  return <div></div>;
};
Children = forwardRef(Children);

react(hooks) 子调父

其实就是父组件传入一个函数给子组件，子组件从 props 就可以拿到父组件传入的函数进行调用

//父组件
let Father = () => {
  let getInfo = () => {};
  return (
    <div>
      <Children getInfo={getInfo} />
    </div>
  );
};

//子组件
let Children = (param) => {
  return (
    <div>
      <span onClick={param.getInfo}>调用父组件函数</span>
    </div>
  );
};

react(class)父调子

useRef 仅能用在 FunctionComponent，createRef 仅能用在 ClassComponent。

import React, { Component } from "react";

export default class Parent extends Component {
  render() {
    return (
      <div>
        <Child onRef={this.onRef} />
        <button onClick={this.click}>click</button>
      </div>
    );
  }

  onRef = (ref) => {
    this.child = ref;
  };

  click = (e) => {
    this.child.myName();
  };
}

class Child extends Component {
  componentDidMount() {
    this.props.onRef(this);
  }

  myName = () => alert("test");

  render() {
    return "1";
  }
}

参考useEffect使用

组件通讯 ​

vue2 ​

vue3 ​

react >=16 ​

react(hooks) 父调子 ​

react(hooks) 子调父 ​

react(class)父调子 ​