原文合集地址如下，有需要的朋友可以關(guān)注

本文地址

合集地址

React

當(dāng)父組件需要調(diào)用子組件的方法時(shí)，可以通過(guò)useImperativeHandle鉤子函數(shù)實(shí)現(xiàn)。以下例子是ts實(shí)現(xiàn)方式。

• 在子組件中使用 useImperativeHandle 鉤子，將指定的方法暴露給父組件，以便父組件可以通過(guò)子組件的引用來(lái)調(diào)用該方法。 在子組件中使用了 useImperativeHandle 鉤子將 someMethod 方法暴露給父組件。注意，為了使用 useImperativeHandle，需要將子組件包裹在 forwardRef 函數(shù)中，并在參數(shù)列表中添加 ref。

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

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

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

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

??const?someMethod?=?()?=>?{
????//?子組件的方法實(shí)現(xiàn)
????console.log('Child?method?called!');
??};

??//?將子組件的方法暴露給父組件
??useImperativeHandle(ref,?()?=>?({
????someMethod,
??}));

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

export?default?forwardRef(ChildComponent);



上述代碼中 React.ForwardRefRenderFunction 是 TypeScript 中的一個(gè)泛型類(lèi)型，用于定義 forwardRef 的 render 函數(shù)的類(lèi)型。 在這個(gè)類(lèi)型參數(shù)中，ChildMethods 表示子組件暴露給父組件的方法的類(lèi)型，ChildProps 表示子組件的 props 類(lèi)型。({}) 是 render 函數(shù)的參數(shù)列表，表示子組件接收的 props，此處為空對(duì)象，即沒(méi)有額外的 props。ref 是 forwardRef 傳遞的 ref 參數(shù)，用于獲取對(duì)子組件實(shí)例的引用。 總而言之，React.ForwardRefRenderFunction<ChildMethods, ChildProps> 定義了一個(gè) forwardRef 的 render 函數(shù)類(lèi)型，接收的 props 類(lèi)型為 ChildProps，暴露給父組件的方法的類(lèi)型為 ChildMethods，而在具體的函數(shù)實(shí)現(xiàn)中，參數(shù)列表為空對(duì)象，并接收 ref 參數(shù)用于獲取對(duì)子組件實(shí)例的引用。 這些是常見(jiàn)的父組件調(diào)用子組件內(nèi)部方法的方式。

有了上面的子組件，在父組件中，可以使用 useRef 鉤子來(lái)創(chuàng)建一個(gè)對(duì)子組件的引用，并通過(guò)引用調(diào)用子組件的方法：

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

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

??const?handleClick?=?()?=>?{
????//?通過(guò)子組件的引用調(diào)用子組件的方法
????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 中，父組件調(diào)用子組件內(nèi)部的方法可以通過(guò)下面的方式實(shí)現(xiàn)：

使用 $refs 引用子組件：

• 在父組件中使用 ref 給子組件添加一個(gè)引用，并通過(guò)該引用調(diào)用子組件的方法。

• 注意：在 Vue 3 中，$refs 不再自動(dòng)包含子組件實(shí)例，而是返回一個(gè)組件實(shí)例或 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>