Vue.JS中兄弟组件传值

在Vue.js中，兄弟组件之间的数据传递通常需要通过父组件作为中介。有几种方法可以实现兄弟组件之间的数据传递：

1. 通过共享状态管理（如Vuex）： Vuex 是Vue.js的官方状态管理库，允许你在整个应用的任何地方共享状态。通过在Vuex中存储数据，兄弟组件都可以访问和修改这些共享的状态。这是一种非常强大和灵活的方式，适用于大型应用。

2. 通过事件总线（Event Bus）： 你可以使用Vue的实例作为事件总线，兄弟组件通过事件的方式进行通信。一个组件触发事件，而另一个组件监听并响应这些事件。

3. 通过父组件作为中介： 兄弟组件通过共同的父组件来传递数据。父组件接收一个子组件的数据，并将其作为prop传递给另一个子组件。

以下是通过父组件作为中介的一个简单示例：

<!-- 父组件 -->
<template>
  <div>
    <ChildComponentA :dataToPass="sharedData" @updateData="updateData" />
    <ChildComponentB :dataReceived="sharedData" />
  </div>
</template>

<script>
import ChildComponentA from './ChildComponentA.vue';
import ChildComponentB from './ChildComponentB.vue';

export default {
  components: {
    ChildComponentA,
    ChildComponentB,
  },
  data() {
    return {
      sharedData: 'Initial data',
    };
  },
  methods: {
    updateData(newData) {
      this.sharedData = newData;
    },
  },
};
</script>

<!-- ChildComponentA.vue -->
<template>
  <div>
    <input v-model="localData" />
    <button @click="sendDataToParent">Send Data to B</button>
  </div>
</template>

<script>
export default {
  props: {
    dataToPass: String,
  },
  data() {
    return {
      localData: this.dataToPass,
    };
  },
  methods: {
    sendDataToParent() {
      this.$emit('updateData', this.localData);
    },
  },
};
</script>

<!-- ChildComponentB.vue -->
<template>
  <div>
    <p>Data from A: {{ dataReceived }}</p>
  </div>
</template>

<script>
export default {
  props: {
    dataReceived: String,
  },
};
</script>

在这个例子中，ChildComponentA通过input元素和button按钮实现用户输入并通过事件sendDataToParent触发将数据发送给父组件。父组件接收到数据后，通过updateData方法更新sharedData，然后将sharedData作为prop传递给ChildComponentB，从而完成兄弟组件之间的数据传递。