vue里兄弟组件传值

在Vue中，兄弟组件之间的通信可以通过父组件作为中介来实现。具体来说，可以通过在父组件中定义一个数据对象，然后将这个数据对象作为props分别传递给两个兄弟组件，这样两个兄弟组件就可以通过修改这个数据对象来实现通信。

另外，Vue还提供了一个事件总线的机制，可以通过在父组件中创建一个空的Vue实例作为事件总线，然后在兄弟组件中分别通过$emit和$on方法来触发和监听事件，从而实现兄弟组件之间的通信。

下面是一个示例代码，演示了通过props和事件总线两种方式实现兄弟组件之间的通信：

// 父组件
<template>
  <div>
    <child1 :message="message" @update-message="updateMessage"></child1>
    <child2 :message="message" @update-message="updateMessage"></child2>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    updateMessage(message) {
      this.message = message
    }
  },
  created() {
    this.bus = new Vue()
  }
}
</script>

// 子组件1
<template>
  <div>
    <input v-model="message">
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('update-message', this.message)
    }
  }
}
</script>

// 子组件2
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message'],
  created() {
    this.$parent.bus.$on('update-message', message => {
      this.message = message
    })
  }
}
</script>