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

**父组件与子组件之间的通信**

在 React 和 Vue3 中，父组件可以通过各种方式来调用子组件内部的方法。下面我们将分别讨论这些方式。

###1. 使用回调函数（React）

在 React 中，我们可以使用回调函数来传递一个函数给子组件，让子组件执行这个函数。

**子组件**

jsximport React from 'react';

const ChildComponent = ({ onButtonClick }) => {
 const handleClick = () => {
 console.log('Button clicked!');
 };

 return (
 <div>
 <button onClick={onButtonClick}>Click me!</button>
 </div>
 );
};

export default ChildComponent;

**父组件**

jsximport React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
 const handleButtonClick = () => {
 console.log('Button clicked by parent!');
 };

 return (
 <div>
 <ChildComponent onButtonClick={handleButtonClick} />
 </div>
 );
};

export default ParentComponent;

在上面的例子中，我们定义了一个 `onButtonClick` 回调函数，并传递它给子组件。然后，在子组件内部，我们使用这个回调函数来执行父组件的方法。

###2. 使用事件总线（Vue3）

在 Vue3 中，我们可以使用事件总线来传递事件给子组件，让子组件执行某些操作。

**子组件**

javascriptimport { defineComponent, onMounted } from 'vue';

const ChildComponent = {
 setup() {
 const handleClick = () => {
 console.log('Button clicked!');
 };

 return { handleClick };
 },
};

export default ChildComponent;

**父组件**

javascriptimport { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent';

const ParentComponent = {
 setup() {
 const handleButtonClick = () => {
 console.log('Button clicked by parent!');
 };

 return { handleButtonClick };
 },
};

export default ParentComponent;

在上面的例子中，我们定义了一个 `handleClick` 方法，并使用事件总线来传递它给子组件。然后，在子组件内部，我们使用这个方法来执行某些操作。

###3. 使用 props（React 和 Vue3）

在 React 和 Vue3 中，我们可以使用 props 来传递数据给子组件，让子组件执行某些操作。

**子组件**

jsximport React from 'react';

const ChildComponent = ({ onButtonClick }) => {
 const handleClick = () => {
 console.log('Button clicked!');
 };

 return (
 <div>
 <button onClick={onButtonClick}>Click me!</button>
 </div>
 );
};

export default ChildComponent;

**父组件**

jsximport React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
 const handleButtonClick = () => {
 console.log('Button clicked by parent!');
 };

 return (
 <div>
 <ChildComponent onButtonClick={handleButtonClick} />
 </div>
 );
};

export default ParentComponent;

在上面的例子中，我们定义了一个 `onButtonClick` prop，并传递它给子组件。然后，在子组件内部，我们使用这个 prop 来执行某些操作。

###4. 使用 context（React 和 Vue3）

在 React 和 Vue3 中，我们可以使用 context 来共享数据和函数之间的关系，让子组件执行某些操作。

**子组件**

jsximport React from 'react';

const ChildComponent = ({ onButtonClick }) => {
 const handleClick = () => {
 console.log('Button clicked!');
 };

 return (
 <div>
 <button onClick={onButtonClick}>Click me!</button>
 </div>
 );
};

export default ChildComponent;

**父组件**

jsximport React from 'react';
import { createContext, useContext } from 'react';
import ChildComponent from './ChildComponent';

const ButtonContext = createContext();

const ParentComponent = () => {
 const handleButtonClick = () => {
 console.log('Button clicked by parent!');
 };

 return (
 <div>
 <ButtonContext.Provider value={handleButtonClick}>
 <ChildComponent />
 </ButtonContext.Provider>
 </div>
 );
};

export default ParentComponent;

在上面的例子中，我们定义了一个 `ButtonContext` 并传递它给子组件。然后，在子组件内部，我们使用这个 context 来执行某些操作。

### 总结在 React 和 Vue3 中，父组件可以通过各种方式来调用子组件内部的方法。这些方式包括使用回调函数、事件总线、props 和 context。每种方式都有其特点和应用场景。选择合适的方式取决于具体的需求和实现细节。

**参考**

* React 文档： />* Vue3 文档： />* Event Bus： Context API：