在vue3中，可以使用vue3的API defineExpose()函數結合ref或者$parent，實現父子組件數據的傳遞。

子組件向父組件傳遞數據defineExpose()和ref

• 子組件：通過defineExpose() 函數，向外暴露響應式數據或者方法

// src/components/son.vue
<template>
    <div>
        <h1>兒子有 ${{ son_money }}</h1>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 1-定義子組件內部的響應式數據
const son_money = ref(500);

// 2-定義子組件內部的方法
function queryMoney() {
    alert('兒子還有 $' + son_money.value);
}

// 3-重點：把子組件中的數據或者方法暴露出去
defineExpose({
    son_money,
    queryMoney
});
</script>

• 父組件：通過ref獲取子組件實例，進而獲取子組件暴露的響應式數據或方法

// src/App.vue
<template>
    <div>
        <h1>父組件</h1>
        <button @click="querySon">看看兒子有多少錢</button>
        <button @click="giveSon">給兒子打50塊錢</button>
        <hr>
        <!-- 2-使用子組件 -->
        <Son ref="son" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// 1-引入子組件
import Son from './components/son.vue';

// 3-獲取子組件的實例
const son = ref();

function querySon() {
	// 4-重點：調用子組件暴露的 queryMoney()方法
    son.value.queryMoney();
}

function giveSon() {
	// 5-重點：查改子組件暴露的數據 son_money
    son.value.son_money += 50;
}
</script>