vu e兄弟组件传值

在Vue中，兄弟组件之间的通信可以通过共同的父组件来实现。具体实现方式有以下几种：

1.使用事件总线（Event Bus）：创建一个空的Vue实例作为事件总线，兄弟组件通过该实例来进行通信。

// 在main.js中创建事件总线
Vue.prototype.$bus = new Vue()

// 在发送方组件中触发事件
this.$bus.$emit('eventName', data)

// 在接收方组件中监听事件
this.$bus.$on('eventName', data => {
  // 处理数据
})

2.使用Vuex：Vuex是Vue的状态管理库，可以用来管理组件之间的共享状态。

// 在store.js中定义状态和修改状态的方法
const store = new Vuex.Store({
  state: {
    data: ''
  },
  mutations: {
    setData(state, payload) {
      state.data = payload
    }
  }
})

// 在发送方组件中提交mutation来修改状态
this.$store.commit('setData', data)

// 在接收方组件中通过计算属性来获取状态
computed: {
  data() {
    return this.$store.state.data
  }
}

3.使用props和$emit：父组件通过props向子组件传递数据，子组件通过$emit触发事件来向父组件传递数据。

// 在父组件中向子组件传递数据
<child-component :data="data"></child-component>

// 在子组件中通过props接收数据
props: {
  data: {
    type: String,
    default: ''
  }
}

// 在子组件中触发事件向父组件传递数据
this.$emit('eventName', data)

// 在父组件中监听事件
<child-component @eventName="handleEvent"></child-component>
methods: {
  handleEvent(data) {
    // 处理数据
  }
}