React、Vue3中父组件如何调用子组件内部的方法

发布时间:2023年12月26日

当父组件需要调用子组件的方法时,可以通过useImperativeHandle钩子函数实现。以下例子是ts实现方式。

  • 在子组件中使用?useImperativeHandle?钩子,将指定的方法暴露给父组件,以便父组件可以通过子组件的引用来调用该方法。 在子组件中使用了 useImperativeHandle 钩子将 someMethod 方法暴露给父组件。注意,为了使用 useImperativeHandle,需要将子组件包裹在 forwardRef 函数中,并在参数列表中添加 ref。

// 子组件
import React, { forwardRef, useImperativeHandle, useRef } from 'react';

type ChildProps = {
  // 子组件的其他 props
};

type ChildMethods = {
  // 子组件暴露给父组件的方法
  someMethod: () => void;
};

const ChildComponent: React.ForwardRefRenderFunction<ChildMethods, ChildProps> = ({}, ref) => {
  // 子组件的其他代码...

  const someMethod = () => {
    // 子组件的方法实现
    console.log('Child method called!');
  };

  // 将子组件的方法暴露给父组件
  useImperativeHandle(ref, () => ({
    someMethod,
  }));

  return <div>Child Component</div>;
};

export default forwardRef(ChildComponent);

上述代码中?React.ForwardRefRenderFunction?是 TypeScript 中的一个泛型类型,用于定义 forwardRef 的 render 函数的类型。 在这个类型参数中,ChildMethods?表示子组件暴露给父组件的方法的类型,ChildProps?表示子组件的 props 类型。({})?是 render 函数的参数列表,表示子组件接收的 props,此处为空对象,即没有额外的 props。ref?是?forwardRef?传递的 ref 参数,用于获取对子组件实例的引用。 总而言之,React.ForwardRefRenderFunction<ChildMethods, ChildProps>?定义了一个 forwardRef 的 render 函数类型,接收的 props 类型为?ChildProps,暴露给父组件的方法的类型为?ChildMethods,而在具体的函数实现中,参数列表为空对象,并接收?ref?参数用于获取对子组件实例的引用。 这些是常见的父组件调用子组件内部方法的方式。

有了上面的子组件,在父组件中,可以使用 useRef 钩子来创建一个对子组件的引用,并通过引用调用子组件的方法:


// 父组件
import React, { useRef } from 'react';
import ChildComponent, { ChildMethods } from './ChildComponent';

const ParentComponent: React.FC = () => {
  const childRef = useRef<ChildMethods>(null);

  const handleClick = () => {
    // 通过子组件的引用调用子组件的方法
    if (childRef.current) {
      childRef.current.someMethod();
    }
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Call Child Method</button>
    </div>
  );
};

export default ParentComponent;

Vue3

在 Vue 3 中,父组件调用子组件内部的方法可以通过下面的方式实现:

使用?$refs?引用子组件:

  • 在父组件中使用?ref?给子组件添加一个引用,并通过该引用调用子组件的方法。

  • 注意:在 Vue 3 中,$refs?不再自动包含子组件实例,而是返回一个组件实例或 DOM 元素的直接引用。


<!-- 子组件 -->
<template>
  <div>
    <button @click="childMethod">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called!');
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent ref="childRef" />
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childRef = ref(null);

    const callChildMethod = () => {
      childRef.value.childMethod();
    };

    return {
      childRef,
      callChildMethod
    };
  }
};
</script>

文章来源:https://blog.csdn.net/weixin_42333548/article/details/135198778
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。