🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

• 🤖 洛可可白：个人主页

• 🔥 个人专栏：✅前端技术 ✅后端技术

• 🏠 个人博客：洛可可白博客

• 🐱 代码获取：bestwishes0203

• 📷 封面壁纸：洛可可白wallpaper

Vue2和Vue3组件通信：父子与兄弟间的桥梁

在构建Vue应用时，掌握组件间的数据传输是至关重要的。本文将深入探讨Vue 2和Vue 3中父子组件间的通信机制，以及兄弟组件如何通过provide/inject API进行数据共享。我们还将讨论跨层级组件通信的策略，包括使用事件总线（Event Bus）的模式。通过实用的代码示例和清晰的解释，你将学习到如何有效地在不同层级的Vue组件之间传递数据。无论你是Vue新手还是有经验的开发者，本文都将帮助你更好地理解和应用Vue的组件通信模式，从而构建出更加健壮和可维护的应用程序。

父组件向子组件传递数据

<!-- 父组件 -->
<template>
  <ChildComponent :parentMessage="message" />
</template>

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

const message = ref('来自父组件的消息');
</script>

<!-- 子组件 -->
<template>
  <div>{{ parentMessage }}</div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
const props = defineProps({
  parentMessage: String
});
</script>

子组件向父组件传递数据

<!-- 子组件 -->
<template>
  <button @click="sendMessageToParent">点击我发送消息给父组件</button>
</template>

<script setup lang="ts">
import { defineEmits } from 'vue';
const emit = defineEmits(['message-from-child']);

function sendMessageToParent() {
  emit('message-from-child', '这是来自子组件的消息');
}
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @message-from-child="receiveMessage" />
</template>

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

const receiveMessage = (message: string) => {
  console.log('父组件接收到的消息:', message);
}
</script>

兄弟组件间的数据传输

使用provide/inject API

<!-- 父组件 -->
<script setup lang="ts">
import { ref, provide } from 'vue';
import SiblingComponentA from './SiblingComponentA.vue';
import SiblingComponentB from './SiblingComponentB.vue';

const sharedData = ref('兄弟组件共享的数据');
provide('sharedDataKey', sharedData.value);
</script>

<!-- 兄弟组件A -->
<script setup lang="ts">
import { inject } from 'vue';

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

<!-- 兄弟组件B -->
<script setup lang="ts">
import { inject } from 'vue';

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

跨层级组件间的数据传输

跨层级组件的通信可以使用Vuex或Vue 3的provide/inject API，或者通过事件总线（Event Bus）。

使用事件总线

// eventBus.ts
import { reactive, readonly } from 'vue';

export const EventBus = reactive({
  events: new Map<string, Array<(...args: any[]) => void>>()
});

export function emit(event: string, ...args: any[]) {
  if (EventBus.events.has(event)) {
    EventBus.events.get(event)?.forEach(handler => handler(...args));
  }
}

export function on(event: string, handler: (...args: any[]) => void) {
  if (!EventBus.events.has(event)) {
    EventBus.events.set(event, new Array<(...args: any[]) => void>());
  }
  EventBus.events.get(event)?.push(handler);
}

在需要发送事件的组件中：

<script setup lang="ts">
import { onMounted } from 'vue';
import { emit } from './eventBus';

onMounted(() => {
  emit('event-name', { data: '这是来自子组件的消息' });
});
</script>

在需要接收事件的组件中：

<script setup lang="ts">
import { onMounted } from 'vue';
import { on } from './eventBus';

onMounted(() => {
  on('event-name', (data) => {
    console.log('接收到的事件数据:', data.data);
  });
});
</script>

结语

使用 <script setup> 语法可以让我们以更简洁的方式编写Vue组件，尤其是在TypeScript的支持下，我们可以享受到更好的类型推断和自动补全。这使得组件间的通信代码更加清晰和易于维护。在构建大型应用时，合理地使用这些通信模式将有助于保持应用的模块化和可扩展性。

如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀

🎉 往期精彩回顾

前端与后端协同：实现Excel导入导出功能
Java日期格式化：掌握时间的艺术
JavaScript日期格式化：从原始值到用户友好的字符串
入门教程：Windows搭建C语言和EasyX开发环境
CentOS系统下Docker的安装教程
Spring Boot单元测试全指南：使用Mockito和AssertJ
Yarn简介及Windows安装与使用指南
H5实现3D旋转照片墙教程
Element-Plus 实现动态渲染图标教程
MyBatis-Plus分页接口实现教程：Spring Boot中如何编写分页查询
Element-Plus下拉菜单边框去除教程