Vue/React子组件实例暴露方法(TypeScript)

接下来我将为你详细讲解“Vue/React子组件实例暴露方法(TypeScript)”的完整攻略。

1. 为什么要暴露子组件实例方法？

在Vue/React组件开发中，父子之间的组件通信是很常见的一种情况。而在某些情况下，我们需要获取子组件的实例，以便使父组件调用子组件的方法或属性。这个时候就需要用到子组件实例的暴露方法。

2. 如何在Vue子组件中暴露实例方法？

2.1 Vue子组件代码示例：

<template>
  <div>
    <button @click="handleClick">点击按钮</button>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class ChildComponent extends Vue {
  handleClick() {
    this.$emit('my-event', '这是子组件传递到父组件的数据');
  }

  doSomething() {
    console.log('子组件的方法被调用了！');
  }

  mounted() {
    if (this.$parent && this.$parent.$options.name === 'ParentComponent') {
      // 把子组件的实例挂载到父组件的$refs属性上，以便在父组件中调用子组件的方法
      this.$parent.$refs.childComponent = this;
    }
  }
}
</script>

在Vue子组件中，我们通过mounted钩子函数（组件挂载后调用）把子组件的实例挂载到父组件的$refs属性上。

2.2 Vue父组件代码示例：

<template>
  <div>
    <ChildComponent @my-event="handleChildEvent" />
    <button @click="handleClick">调用子组件方法</button>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

import ChildComponent from '@/components/ChildComponent.vue';

@Component({
  components: {
    ChildComponent,
  },
})
export default class ParentComponent extends Vue {
  childComponent: any = null;

  handleChildEvent(data: any) {
    console.log('子组件传递的数据：', data);
  }

  handleClick() {
    if (this.childComponent) {
      this.childComponent.doSomething();
    }
  }
}
</script>

在Vue父组件中，我们通过$refs属性（组件引用）获取子组件的实例，并调用子组件的doSomething方法。

3. 如何在React子组件中暴露实例方法？

3.1 React子组件代码示例：

import React, { Component } from 'react';

class ChildComponent extends Component {
  doSomething() {
    console.log('子组件的方法被调用了！');
  }

  componentDidMount() {
    if (this.props.parent) {
      // 把子组件的实例挂载到父组件的child属性上，以便在父组件中调用子组件的方法
      this.props.parent.child = this;
    }
  }

  render() {
    return (
      <div>
        <button onClick={this.props.handleClick}>点击按钮</button>
      </div>
    );
  }
}

export default ChildComponent;

在React子组件中，我们在componentDidMount生命周期函数（组件挂载后调用）把子组件的实例挂载到父组件的child属性上。

3.2 React父组件代码示例：

import React, { Component } from 'react';

import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  handleClick = () => {
    if (this.child) {
      this.child.doSomething();
    }
  };

  render() {
    return (
      <div>
        <ChildComponent parent={this} handleClick={this.handleClick} />
        <button onClick={this.handleClick}>调用子组件方法</button>
      </div>
    );
  }
}

export default ParentComponent;

在React父组件中，我们通过props把自己传递给子组件，然后在子组件中挂载实例到父组件的child属性上，最后调用子组件的doSomething方法。

4. 总结

• 在Vue组件中，可以通过$emit函数把子组件的数据传递到父组件中，并通过$refs属性获取子组件的实例，以便在父组件中调用子组件的方法。
• 在React组件中，可以通过props把自己传递给子组件，在子组件中把实例挂载到父组件的属性上，以便在父组件中调用子组件的方法。