在Vue3的世界里，父子组件之间的通信是一个基础而重要的话题。本文将通过一个生动的案例，带你从零开始，逐步掌握Vue3中父子组件通信的精髓。

一、父组件传递信息给子组件

首先，让我们看看父组件是如何向子组件传递信息的。假设我们有一个父亲角色和一个儿子角色，父亲想要给儿子一些钱，但又不想直接给他，而是通过某种方式让儿子自己操作。

在父组件中，我们可以使用<script setup>语法糖来定义响应式数据和函数：

<script setup>
import { ref } from 'vue'
const money = ref(100) // 父亲的钱

const addMoney = () => {
money.value += 10 // 增加10元
}

const subMoney = () => {
money.value -= 20 // 减少20元
}
</script>

<template>
我是父亲
<sonCom :money="money" @subMoney="subMoney" />
<button @click="addMoney">加钱</button>
</template>

在上面的代码中，我们定义了一个名为money的响应式变量来表示父亲的钱。然后，我们创建了两个函数addMoney和subMoney来分别增加和减少这个数值。最后，我们将money变量通过:money属性传递给子组件sonCom，并通过@subMoney监听子组件触发的subMoney事件。

二、子组件接收并使用信息

接下来，让我们看看子组件是如何接收并使用父组件传递的信息的。

在子组件中，我们同样可以使用<script setup>语法糖来定义响应式数据和函数：

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
money: Number // 接收父组件传递的钱
})

const emit = defineEmits(['subMoney']) // 定义要触发的事件

const buy = () => {
emit('subMoney') // 触发事件，通知父组件减少钱
}
</script>

<template>
我是儿子，我有{{ money }}元
<button @click="buy">花钱</button>
</template>

在上面的代码中，我们首先使用defineProps定义了两个属性：money用于接收父组件传递的钱，emit用于触发事件。然后，我们创建了一个名为buy的函数，该函数通过调用emit方法触发subMoney事件，通知父组件减少钱。

三、子组件传递信息给父组件

除了父组件向子组件传递信息外，子组件也可以向父组件传递信息。这可以通过在子组件中使用$emit方法来实现。

假设子组件需要告诉父组件它完成了某项任务，并且可能需要一些奖励。这时，子组件可以在完成任务后触发一个自定义事件，并将相关信息作为参数传递给父组件。

例如，在上面的buy函数中，我们可以修改为以下代码：

const buy = () => {
// 完成任务后，触发自定义事件，并传递奖励金额
emit('taskCompleted', money.value * 0.1) // 假设给予10%的奖励
}

在父组件中，我们需要监听这个自定义事件，并处理相应的逻辑：

<template>
我是父亲
<sonCom :money="money" @subMoney="subMoney" @taskCompleted="handleTaskCompleted" />
<button @click="addMoney">加钱</button>
</template>

<script setup>
import { ref } from 'vue'
const money = ref(100)

const subMoney = () => {
money.value -= 20
}

const handleTaskCompleted = (reward) => {
// 处理任务完成的奖励逻辑
console.log('任务完成，获得奖励：', reward)
}
</script>

在上面的代码中，我们通过监听taskCompleted事件来处理子组件传递过来的奖励信息。当子组件触发这个事件时，父组件会接收到一个包含奖励金额的参数，并可以对其进行相应的处理。

四、总结

通过以上案例，我们可以看到Vue3中父子组件通信的灵活性和强大功能。无论是父组件向子组件传递信息，还是子组件向父组件传递信息，都只需要使用简单的属性绑定和事件触发即可实现。这种通信方式不仅简单易懂，而且能够满足大部分场景下的需求。

当然，在实际开发中，我们可能会遇到更复杂的通信需求。这时，我们可以结合Vue3的新特性，如Provide/Inject、Vuex等，来实现更高效、更灵活的组件通信。但无论如何，掌握Vue3中的父子组件通信原理和方法都是非常重要的。