vue3.5 组件通讯

### Vue 3.5 中组件间的通信方法

#### 父子组件通信

在Vue中，父子组件通信是最常见的数据传递方式。父组件通过`props`向子组件传递数据，而子组件则可以通过自定义事件与父组件进行通信，从而形成一个单向数据流[^1]。

对于父组件来说，只需要在子组件标签上绑定属性即可实现数据的向下传递：

<template>
  <ChildComponent :message="parentMessage"/>
</template>

<script setup>
import { ref } from 'vue'
const parentMessage = ref('Hello Child')
</script>

当子组件接收到这些属性后，可以在内部使用它们来更新自身的状态或执行特定逻辑操作。为了响应来自子组件的消息，父组件还可以监听由子组件触发的事件:

<!-- Parent Component -->
<template>
  <ChildComponent @childEvent="handleChildEvent"/>
</template>

<script setup>
function handleChildEvent(data){
    console.log(`Received message from child component: ${data}`)
}
</script>

而在子组件端，则需声明接收哪些prop以及如何发送消息回给父级组件：

<!-- Child Component -->
<template>
  <button @click="$emit('childEvent', 'Hello Parent')">Click me!</button>
</template>

<script setup>
defineProps(['message'])
</script>

这种模式不仅适用于直接嵌套的一层关系内；即使存在多层级结构时也同样有效 —— 只要按照上述原则逐层穿透下去就可以完成跨层次的信息交流了。

#### 非父子组件间通信

除了传统的基于树状结构的父子组件通信外，在某些场景下还需要处理平级或其他复杂拓扑下的组件交互需求。此时可采用以下几种策略之一：

- **提供/注入 (Provide / Inject)** ：允许祖先组件向其所有后代子孙共享某些公共资源（如主题颜色、国际化设置等），而不必显式地一层层往下传参；

- **全局事件总线(Event Bus)** 或者借助第三方库像Vuex来进行更复杂的管理；

- 使用 `ref` 和 `$refs` 来获取对其他组件实例的引用并调用其公开的方法或访问暴露出来的变量。

其中最推荐的方式是在大型应用程序里引入专门的状态管理系统比如 Vuex ，它能够很好地解决多个不相隶属部件之间协调工作的难题，并且保持良好的解耦性和维护性。