父组件调用子组件的方法详解

发布时间：2023-05-18

一、从父组件调用子组件的方法React

在React中，父组件可以通过refs来访问子组件的方法。具体方法如下：

//子组件
class ChildComponent extends React.Component {
  sayHello() {
    alert("Hello!");
  }
  render() {
    return 
    <div>Child Component</div>
  }
}
//父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }
  handleClick() {
    this.childRef.current.sayHello();
  }
  render() {
    return(
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleClick.bind(this)}>Call Child Method</button>
      </div>
    );
  }
}

在上面的代码中，createRef()方法创建了一个子组件的引用，并将引用存储在父组件的对象中。当按钮被点击时，父组件通过子组件的引用来调用子组件的sayHello方法。

二、父组件调用子组件方法报错

在某些情况下，父组件可能会试图调用不存在的子组件方法，这时候会抛出一个错误。为了避免这种错误，我们应该在父组件中检查子组件是否在渲染之前已经被加载完毕。具体方法如下：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }
  handleClick() {
    if(this.childRef.current) {
      this.childRef.current.sayHello();
    }
  }
  render() {
    return(
      <div>
        {this.props.showChild && <ChildComponent ref={this.childRef} />}
        <button onClick={this.handleClick.bind(this)}>Call Child Method</button>
      </div>
    );
  }
}

在上面的代码中，我们首先检查子组件是否已经被加载。如果它已经被加载，我们才会尝试调用子组件的方法。

三、Vue父组件调用子组件的方法

在Vue中，我们可以使用$refs来访问子组件的方法。具体方法如下：

//子组件
Vue.component('child-component', {
  methods: {
    sayHello() {
      alert("Hello!");
    }
  },
  template: '<div>Child Component</div>'
});
//父组件
Vue.component('parent-component', {
  methods: {
    handleClick() {
      this.$refs.childComponent.sayHello();
    }
  },
  template: '<div>'+
              '<child-component ref="childComponent"></child-component>'+
              '<button @click="handleClick">Call Child Method</button>'+
            '</div>'
});

在上面的代码中，我们首先创建了一个子组件，它包含了一个sayHello方法。父组件中的handleClick方法调用this.$refs.childComponent来访问子组件的方法。

四、父组件调用子组件中的方法

如果子组件中有多个方法，父组件可以使用子组件的方法名称来调用具体的方法。具体方法如下：

//子组件
class ChildComponent extends React.Component {
  sayHello() {
    alert("Hello!");
  }
  sayGoodbye() {
    alert("Goodbye!");
  }
  render() {
    return 
    <div>Child Component</div>
  }
}
//父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }
  handleClick(methodName) {
    this.childRef.current[methodName]();
  }
  render() {
    return(
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleClick.bind(this, "sayHello")}>Call sayHello Method</button>
        <button onClick={this.handleClick.bind(this, "sayGoodbye")}>Call sayGoodbye Method</button>
      </div>
    );
  }
}

在上面的代码中，我们创建了一个子组件，它包含了sayHello和sayGoodbye方法。父组件通过将方法名作为参数来调用子组件中的具体方法。

五、Vue3父组件调用子组件方法

在Vue3中，我们可以使用$refs来访问子组件的方法。具体方法如下：

//子组件
const ChildComponent = {
  methods: {
    sayHello() {
      alert("Hello!");
    }
  },
  template: '<div>Child Component</div>'
}
//父组件
const ParentComponent = {
  methods: {
    handleClick() {
      this.$refs.childComponent.sayHello();
    }
  },
  template: '<div>'+
              '<child-component ref="childComponent"></child-component>'+
              '<button @click="handleClick">Call Child Method</button>'+
            '</div>',
  components: {ChildComponent}
}

在上面的代码中，我们创建了一个子组件ChildComponent，它包含了一个sayHello方法。父组件中的handleClick方法调用this.$refs.childComponent来访问子组件的方法。

六、子组件调用父组件的方法

在React中，子组件可以通过props来调用位于父组件中的方法。具体方法如下：

//子组件
class ChildComponent extends React.Component {
  handleClick() {
    this.props.sayHello();
  }
  render() {
    return <button onClick={this.handleClick.bind(this)}>Say Hello</button>
  }
}
//父组件
class ParentComponent extends React.Component {
  sayHello() {
    alert("Hello!");
  }
  render() {
    return(
      <div>
        <ChildComponent sayHello={this.sayHello.bind(this)} />
      </div>
    );
  }
}

在上面的代码中，我们创建了一个父组件ParentComponent，它包含了一个sayHello方法。子组件ChildComponent通过props引用来访问到位于父组件中的sayHello方法。

七、微信小程序父组件调用子组件方法

在微信小程序中，父组件可以通过this.selectComponent()方法来获取子组件的实例，从而访问子组件的方法。具体方法如下：

//子组件
Component({
  methods: {
    sayHello() {
      console.log("Hello!");
    }
  }
})
//父组件
Page({
  handleButtonClick() {
    let childComponent = this.selectComponent('.child-component');
    childComponent.sayHello();
  }
})

在上面的代码中，我们使用Component()来创建一个子组件，父组件使用selectComponent()方法来获取子组件的实例，并通过该实例来调用子组件的sayHello方法。

八、父组件调用子组件方法返回的值

如果子组件方法返回了一个值，父组件可以通过给子组件方法传递一个回调函数来获取由子组件返回的值。具体方法如下：

//子组件
class ChildComponent extends React.Component {
  getValue(callback) {
    callback("Hello!");
  }
  render() {
    return 
    <div>Child Component</div>
  }
}
//父组件
class ParentComponent extends React.Component {
  handleGetChildValue(value) {
    alert(value);
  }
  handleClick() {
    this.childRef.current.getValue(this.handleGetChildValue.bind(this));
  }
  render() {
    return(
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleClick.bind(this)}>Get Child Value</button>
      </div>
    );
  }
}

在上面的代码中，我们创建了一个子组件，它包含了一个getValue方法，该方法接受一个回调函数，并将"value"作为参数传递给该回调函数。父组件通过将handleGetChildValue方法作为参数传递给子组件中的getValue方法来获取子组件返回的值。

推荐文章