Vue3组件间通信通过回调函数传递数据

一、前言
- 1、使用场景
- 2、实现方法
- - 1. 父组件中定义回调方法
  - 2. 子组件中触发回调方法
二、结论

一、前言

在 Vue 3 中，组件之间的通信是一个重要的主题。在许多情况下，你可能需要从子组件向父组件传递数据或触发父组件中的某些方法。本文将介绍一种常见的方法，即通过回调函数来实现组件之间的通信，并且在回调函数中传递数据。

1、使用场景

假设我们有一个父组件 ParentComponent 和一个子组件 ChildComponent。我们希望当用户在子组件中执行某些操作时，能够触发父组件中的方法，并且将一些数据传递给父组件。

2、实现方法

1. 父组件中定义回调方法

在父组件中，首先要定义一个回调方法，用于接收从子组件传递过来的数据。

<!-- ParentComponent.vue -->
<template><div><ChildComponent :callback="handleCallback" /></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const handleCallback = (data) => {// 在这里处理回调相关逻辑，可以使用传递的参数dataconsole.log('Callback triggered from ChildComponent with data:', data);
};
</script>

2. 子组件中触发回调方法

在子组件中，我们通过点击按钮或其他交互方式触发回调方法，并将需要传递的数据作为参数传递给父组件的回调方法。

<!-- ChildComponent.vue -->
<template><button @click="triggerCallback">触发回调</button>
</template><script setup>
import { ref, defineProps } from 'vue';const props = defineProps({callback: Function, // 接收回调方法作为 props
});const triggerCallback = () => {const data = '这是传递的参数'; // 设置要传递的参数if (typeof props.callback === 'function') {props.callback(data); // 触发父组件传递的回调方法，并传递参数}
};
</script>