在Vue 3的世界里，组件通信如同细腻的乐章，需要精确的指挥与和谐的共鸣。本文将为您揭示Vue 3中组件间通信的奥秘，带您领略数据流转的高效与灵活。

一、父子组件通信：单向数据流的优雅

在Vue 3中，父子组件间的通信遵循单向数据流的原则。父组件通过props向子组件传递数据，而子组件则通过defineProps来明确数据的类型和必要性。

例如，在父组件Parent.vue中：

<template>
  <ChildOne :msg1="parentMsg1" :msg2="parentMsg2" />
</template>

<script setup>
import { ref } from 'vue';
import ChildOne from './ChildOne.vue';

const parentMsg1 = ref('Hello from parent');
const parentMsg2 = ref('Hello from parent');
</script>

在子组件ChildOne.vue中：

<template>
  <div>{{ msg1 }} {{ msg2 }}</div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  msg1: String,
  msg2: String
});
</script>

二、子组件向父组件传递信息：事件的魔法

子组件可以通过defineEmits定义要触发的事件，并使用emit函数向父组件发送消息。父组件则通过监听这些事件来接收子组件的信息。

在子组件ChildOne.vue中：

<template>
  <button @click="handleClick">Click me</button>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['myClick']);

const handleClick = () => {
  emit('myClick', 'Hello from child');
};
</script>

在父组件Parent.vue中：

<template>
  <ChildOne @myClick="onMyClick" />
</template>

<script setup>
import { ref } from 'vue';
import ChildOne from './ChildOne.vue';

const onMyClick = (msg) => {
  console.log('子组件的消息：', msg);
};
</script>

三、跨层级组件通信：暴露与注入的智慧

在Vue 3中，跨层级组件间的通信变得更为简单。通过provide和inject，我们可以将数据和方法从深层组件传递到任意一层。

在父组件Parent.vue中：

<script setup>
import { provide } from 'vue';
import ChildOne from './ChildOne.vue';

const provideData = () => {
  return {
    sharedData: 'Shared data'
  };
};

provide('sharedData', provideData());
</script>

在任意深层子组件中：

<script setup>
import { inject } from 'vue';

const injectedData = inject('sharedData');
</script>

四、自定义事件与:bind的巧妙结合

v-model在Vue 3中实际上是自定义事件和:bind的结合使用。它允许我们以更简洁的方式实现双向绑定。

在子组件CustomInput.vue中：

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>

<script setup>
import { ref } from 'vue';
</script>

在父组件中使用：

<template>
  <CustomInput v-model="searchText" />
</template>

<script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';

const searchText = ref('');
</script>

五、全局事件总线与状态管理：Mitt与Pinia的强大助力

对于更复杂的应用，我们可以借助全局事件总线和状态管理库如Pinia来实现跨组件、跨层级的数据共享和通信。

在入口文件main.js中配置Mitt作为全局事件总线：

import { createApp } from 'vue';
import App from './App.vue';
import mitt from 'mitt';
const app = createApp(App);
app.config.globalProperties.$eventBus = mitt();
app.mount('# app');

在组件中使用发送和接收事件：

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { eventBus } from '../main.js';

const sendNotification = () => {
  eventBus.emit('message', { from: 'Sender', content: '重要通知' });
};

onMounted(() => {
  eventBus.on('message', handler);
});

onUnmounted(() => {
  eventBus.off('message', handler);
});
</script>

而在状态管理方面，Pinia提供了更为简洁和强大的API来管理应用的状态。

通过这些方法，Vue 3为开发者提供了丰富而灵活的组件通信手段，无论是简单的父子通信还是复杂的全局状态管理，都能轻松应对。掌握这些技巧，将为您的Vue 3应用开发带来极大的便利和效率提升。