Vue组件通信实践：兄弟组件之间的数据传递

用户10781437

发布于 2023-10-10 12:49:08

9710

发布于 2023-10-10 12:49:08

文章被收录于专栏：CSDN搬运文章

在Vue.js应用中，兄弟组件之间的通信是一个常见但稍显复杂的场景。Vue提供了多种方法来实现兄弟组件之间的通信，其中一种主要方式是通过父组件作为中介来传递数据。本文将详细介绍Vue中兄弟组件通信的实现方式，并通过实际例子演示这一过程。

兄弟组件通信的基本原理

兄弟组件之间的通信通常通过它们共同的父组件来实现。兄弟组件通过将数据传递给父组件，再由父组件将数据传递给另一个兄弟组件来完成通信。这一过程中，使用Vue的自定义事件机制能够很好地协调不同组件之间的数据传递。

例子：兄弟组件传递消息

假设我们有两个兄弟组件，分别是A和B，我们希望在其中一个组件中输入一条消息，然后在另一个组件中显示这条消息。

A

<template>
  <div>
    <label for="messageInput">输入消息：</label>
    <input type="text" id="messageInput" v-model="message">
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
  methods: {
    sendMessage() {
      // 触发自定义事件，将消息传递给父组件
      this.$emit('messageSent', this.message);
    },
  },
};
</script>

B

<template>
  <div>
    <p>来自兄弟组件A的消息：{{ receivedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedMessage: '',
    };
  },
  mounted() {
    // 监听来自父组件的自定义事件
    this.$parent.$on('messageSent', this.handleMessage);
  },
  methods: {
    // 事件处理方法，用于接收来自兄弟组件A的消息
    handleMessage(message) {
      this.receivedMessage = message;
    },
  },
};
</script>