---

一、前言

在 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>

二、結論

通過以上步驟，我們成功實現了在 Vue 3 中通過回調函數傳遞數據的功能。這種方式使得組件之間的通信變得更加靈活，父組件可以根據需要傳遞不同的回調方法給子組件，并在子組件中適當的時機觸發這些回調方法，從而實現數據的雙向傳遞和交互。

希望本文能夠幫助你更好地理解 Vue 3 中的組件通信機制，以及如何通過回調函數傳遞數據。