1. Introduction

Components are now the most written part of the day, and inevitably there is the problem of handling data transfer between components. When it comes to parent-child component communication, it is generally divided into the child component to obtain the data and methods of the parent component and the parent component to obtain the data and methods of the child component. This article summarizes how the React/Vue parent reaches for the child’s data and calls the child’s methods.

2. react

The following code is based on version 16.8.

2.1 class components

React Before Hooks, classes were used for any component that needed to maintain state.

Child components

class A extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Lu Fei Fei'
    }
    this.inputRef = React.createRef();
  }
  render() {
    return (
      <input 
         type="text" 
         value={this.state.name} 
         onChange={(e) => this.setState(e.target.value)} ref={this.inputRef}
      />
    )
  }
}
Copy the code

The parent component

class B extends React.Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
  }
  getChildValue = () => {
    console.log(this.child.current.inputRef.current.name);
  }
  render() {
    return (
      <div>
        <A ref={this.child} />
        <button onClick={this.getChildValue}></button>
      </div>
    )
  }
}

Copy the code

As you can see from the code above, the React class component mainly uses the ref as a tool for the parent component to reach out to its children.

2.2 Functional Components

In a function component, there are two steps to get the data of the child components

1. Pass the ref to the subcomponent 2. Wrap the subcomponent with the forwardRefCopy the code

Child components

function A(props, parentRef) {
  return (
    <div>
      <input type="text" ref={parentRef} />
    </div>
  )
}

let ForwardChild = forwardRef(A);

Copy the code

The parent component

export default () => {
  const parentRef = useRef();
  function focusHander() {
    console.log(parentRef.current.value);
  }
  return<div> <ForwardChild ref={parentRef} /> <button onClick={focusHander}> </button> </div>}Copy the code

The react function component also uses ref to obtain the parent component’s data. However, it has A specific disadvantage. The child component A will expose all its information to the parent component.

2.3 Functional Components (Optimization)

The following uses some hooks of hook to do the corresponding optimization

Child components

import React, { useState, useRef, useImperativeHandle, forwardRef } from 'react'

function A(props, parentRef) {
  const inputRef = useRef();
  const [name, setName] = useState('Lu Fei Fei');
  useImperativeHandle(parentRef, () => {
    return {
      name
    }
  })
  return (
    <div>
      <input type="text" ref={inputRef} onChange={setName(e.target.value) } />
    </div>
  )
}

let ForwardChidl = forwardRef(Child);
Copy the code

The parent component

export default () => {
  const parentRef = useRef();

  const say = () => {
    console.log(parentRef.current.name);
  }
  return(<> <ForwardChidl ref={parentRef} /> <button onClick={say}>)}Copy the code

UseImperativeHandle in the hook above has made corresponding optimization, only exposing part of the sub-component to the outside.

3. vue

In React, the parent gets information about its children. In Vue, the parent gets information about its children.

3.1 Method 1 calls child component methods from the parent component to get data

Child components

Methods: {// The parent component gets the datagetName () {
      returnthis.name; }}Copy the code

The parent component

methods: {
    handleName () {
        let name = this.$refs['list'].getName(); console.log(name); }}Copy the code

Vue dafa smells good. React hook we need to use more apis instead of just a ref.

3.2 Method 2 The child component calls the parent component method to pass the value of the child component to the parent component

Child components

methods: {
    val () {
      m.$emit('returnValue'.true); }}Copy the code

The parent component

<A v-bind:returnValue="getVal"></A>

methods: {
    getVal (result) {
        console.log(result)
    }
}
Copy the code

4. To summarize

This note is actually my own when writing the component library, I found that it would be very troublesome for the parent component to obtain the information of the child component after using hook in React, so I wrote this article to summarize and record the operation of the two frameworks.

Haven’t written an article for a long time, let oneself move up later.