Vue.js兄弟组件如何传参？

在Vue.js中，兄弟组件之间可以通过$emit、事件总线或者Vuex等方式来传递值。下面是详细的介绍：

1. 使用$emit方法

使用$emit：子组件通过调用$emit方法，触发父组件监听的事件，并将需要传递的数据作为参数传递给父组件，通过共同的父组件实现参数传递。具体操作如下：

父组件中：

<template>
  <div>
    <ChildComponent1 @message-sent="handleMessage"</ChildComponent1>
  </div>
  <div>
    <ChildComponent2 :value="parentValue"></ChildComponent2>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  data() {
    return {
      parentValue: ''
    };
  },
  components: {
    ChildComponent1, ChildComponent2
  },
  methods: {
	 handleMessage(message) {
	 	this.parentValue = message;
	 }
  }
};
</script>

子组件中：

<template>
  <button @click="sendMessage">Send Message</button>
</template>

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

2. 使用事件总线

使用事件总线：可以通过Vue实例作为事件总线，在兄弟组件之间进行通信。具体操作如下：

创建一个空的Vue实例作为事件总线：

// main.js
Vue.prototype.$eventBus = new Vue();

发送事件和传递值的组件：

<template>
  <div>
    <button @click="sendValue">Send Value</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendValue() {
      this.$eventBus.$emit('value', 'Hello from sibling');
    }
  }
};
</script>

接收事件并接收值的组件：

<template>
  <div>
    {{ value }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    };
  },
  mounted() {
    this.$eventBus.$on('value', (data) => {
      this.value = data;
    });
  }
};
</script>

3. 使用Vuex

使用Vuex：Vuex是Vue.js官方的状态管理库，可以用来实现兄弟组件之间的数据共享。具体操作如下：

首先，需要安装和配置Vuex。然后，在store中定义state和mutations。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    value: ''
  },
  mutations: {
    setValue(state, payload) {
      state.value = payload;
    }
  }
});

发送事件和传递值的组件：

<template>
  <div>
    <button @click="sendValue">Send Value</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendValue() {
      this.$store.commit('setValue', 'Hello from sibling');
    }
  }
};
</script>

接收事件并接收值的组件：

<template>
  <div>
    {{ value }}
  </div>
</template>

<script>
export default {
  computed: {
    value() {
      return this.$store.state.value;
    }
  }
};
</script>

以上就是一些常用的传递值的方法，根据具体的场景选择合适的方式来实现兄弟组件之间的数据传递。