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的支持下，我们可以享受到更好的类型推断和自动补全。这使得组件间的通信代码更加清晰和易于维护。在构建大型应用时，合理地使用这些通信模式将有助于保持应用的模块化和可扩展性。

打赏