Vue 2 和 Vue 3 组件通信详解

NMY112

于 2024-09-03 17:30:10 发布

阅读量664

点赞数 18

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_67572731/article/details/141867235

版权

Vue 2 和 Vue 3 组件通信详解

组件通信是前端开发中的重要部分，尤其在使用 Vue.js 构建复杂应用时，组件之间的数据传递和事件处理显得尤为重要。本文将详细介绍在 Vue 2 和 Vue 3 中如何实现父传子、子传父，以及兄弟组件之间的通信，同时在 Vue 3 中还会展示使用插件来实现兄弟组件之间的通信。

一、父传子通信

1. Vue 2 的实现

在 Vue 2 中，父组件通过 `props` 向子组件传递数据。`props` 是一种单向数据流，数据只能从父组件流向子组件。

父组件：`Parent.vue`

<template>
  <div>
    <Child :message="parentMessage" />
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: { Child },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  }
};
</script>

子组件：`Child.vue`

<template>
  <div>
    子组件接收到的消息: {{ message }}
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

2. Vue 3 的实现

在 Vue 3 中，父传子依然通过 `props` 实现，但可以使用 `setup` 语法糖进行处理，代码更简洁。

父组件：`Parent.vue`

<template>
  <div>
    <Child :message="parentMessage" />
  </div>
</template>

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

const parentMessage = ref('Hello from Parent');
</script>

子组件：`Child.vue`

<template>
  <div>
    子组件接收到的消息: {{ message }}
  </div>
</template>

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

const props = defineProps({
  message: String
});
</script>

二、子传父通信

1. Vue 2 的实现

在 Vue 2 中，子组件可以通过 `$emit` 触发事件来将数据传递给父组件。

父组件：`Parent.vue`

<template>
  <div>
    <Child @update-message="handleUpdateMessage" />
    <p>从子组件接收到的消息: {{ parentMessage }}</p>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: { Child },
  data() {
    return {
      parentMessage: ''
    };
  },
  methods: {
    handleUpdateMessage(newMessage) {
      this.parentMessage = newMessage;
    }
  }
};
</script>

子组件：`Child.vue`

<template>
  <div>
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('update-message', 'Hello from Child');
    }
  }
};
</script>

2. Vue 3 的实现

在 Vue 3 中，子组件依然可以通过 `emit` 来触发事件，将数据传递给父组件。

父组件：`Parent.vue`

<template>
  <div>
    <Child @updateMessage="handleUpdateMessage" />
    <p>从子组件接收到的消息: {{ parentMessage }}</p>
  </div>
</template>

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

const parentMessage = ref('');

function handleUpdateMessage(newMessage) {
  parentMessage.value = newMessage;
}
</script>

子组件：`Child.vue`

<template>
  <div>
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

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

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

function sendMessage() {
  emit('updateMessage', 'Hello from Child');
}
</script>

三、兄弟组件通信

兄弟组件之间的通信通常需要通过一个共同的父组件，或者使用事件总线、状态管理工具来共享数据。

1. Vue 2 的实现

在 Vue 2 中，常见的做法是使用一个事件总线（Event Bus）或 Vuex 来进行兄弟组件之间的通信。这里我们用一个简单的事件总线来演示。

事件总线：`bus.js`

import Vue from 'vue';
export const EventBus = new Vue();

兄弟组件A：`SiblingA.vue`

<template>
  <div>
    <button @click="sendMessage">发送消息到兄弟组件B</button>
  </div>
</template>

<script>
import { EventBus } from './bus.js';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message-from-a', 'Hello from Sibling A');
    }
  }
};
</script>

兄弟组件B：`SiblingB.vue`

<template>
  <div>
    <p>从兄弟组件A接收到的消息: {{ message }}</p>
  </div>
</template>

<script>
import { EventBus } from './bus.js';

export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    EventBus.$on('message-from-a', (msg) => {
      this.message = msg;
    });
  }
};
</script>

2. Vue 3 的实现

在 Vue 3 中，我们可以使用 `provide` 和 `inject` 进行兄弟组件之间的通信，也可以使用第三方状态管理库 `Pinia`。

使用 `provide` 和 `inject`

父组件：`Parent.vue`

<template>
  <div>
    <SiblingA />
    <SiblingB />
  </div>
</template>

<script setup>
import { ref, provide } from 'vue';
import SiblingA from './SiblingA.vue';
import SiblingB from './SiblingB.vue';

const sharedMessage = ref('Initial Message');
provide('sharedMessage', sharedMessage);
</script>

兄弟组件A：`SiblingA.vue`

<template>
  <div>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

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

const sharedMessage = inject('sharedMessage');

function updateMessage() {
  sharedMessage.value = 'Message updated by Sibling A';
}
</script>

兄弟组件B：`SiblingB.vue`

<template>
  <div>
    <p>从Sibling A更新的消息: {{ sharedMessage }}</p>
  </div>
</template>

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

const sharedMessage = inject('sharedMessage');
</script>

使用 `Pinia` 进行兄弟组件通信

`Pinia` 是 Vue 3 的状态管理库，使用它可以很方便地在兄弟组件之间共享状态。

安装 Pinia

npm install pinia

创建 Pinia Store：`store.js`

import { defineStore } from 'pinia';

export const useMessageStore = defineStore('message', {
  state: () => ({
    message: 'Initial Message'
  }),
  actions: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
});

父组件：`Parent.vue`

<template>
  <div>
    <SiblingA />
    <SiblingB />
  </div>
</template>

<script setup>
import { createPinia } from 'pinia';
import { useMessageStore } from './store';
import SiblingA from './SiblingA.vue';
import SiblingB from './SiblingB.vue';

const pinia = createPinia();
</script>

兄弟组件A：`SiblingA.vue`

<template>
  <div>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script setup>
import { useMessageStore } from './store';

const store = useMessageStore();

function updateMessage() {
  store.updateMessage('Message updated by Sibling A');
}
</script>

兄弟组件B：`SiblingB.vue`

<template>
  <div>
    <p>从Sibling A更新的消息: {{ store.message }}</p>
  </div>
</template>

<script setup>
import { useMessageStore } from './store';

const store = useMessageStore();
</script>

下面是一个使用 `mitt` 在 Vue 3 中实现兄弟组件之间通信的示例。

安装 `mitt`

首先，需要安装 `mitt`：

npm install mitt

创建事件总线

在项目中创建一个事件总线文件，比如 `eventBus.js`：

// eventBus.js
import mitt from 'mitt';

const eventBus = mitt();

export default eventBus;

兄弟组件通信示例

兄弟组件A：`SiblingA.vue`

<template>
  <div>
    <button @click="sendMessage">发送消息到兄弟组件B</button>
  </div>
</template>

<script setup>
import eventBus from './eventBus.js';

function sendMessage() {
  eventBus.emit('messageFromA', 'Hello from Sibling A');
}
</script>

兄弟组件B：`SiblingB.vue`

<template>
  <div>
    <p>从兄弟组件A接收到的消息: {{ message }}</p>
  </div>
</template>

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

const message = ref('');

function handleMessage(msg) {
  message.value = msg;
}

onMounted(() => {
  eventBus.on('messageFromA', handleMessage);
});

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

父组件：`Parent.vue`

将兄弟组件 A 和 B 放在一个父组件中：

<template>
  <div>
    <SiblingA />
    <SiblingB />
  </div>
</template>

<script setup>
import SiblingA from './SiblingA.vue';
import SiblingB from './SiblingB.vue';
</script>

解释

事件总线 (mitt)： mitt 是一个轻量级的事件触发器，提供了 emit 和 on 等方法，帮助组件之间进行消息传递。
兄弟组件A (SiblingA)：通过 eventBus.emit('messageFromA', 'Hello from Sibling A'); 发送消息。
兄弟组件B (SiblingB)：使用 eventBus.on('messageFromA', handleMessage); 监听消息，并在组件卸载时通过 eventBus.off 取消监听，避免内存泄漏。