Vue 中兄弟组件传值的方法有:1. 通过属性传递;2. 通过事件总线传递;3. 通过 Vuex 存储。

Vue 中兄弟组件传值
在 Vue 应用中,兄弟组件之间需要传递数据时,可以使用以下方法:
1. 通过属性传递
在父组件中,为需要传递数据的子组件定义一个属性。子组件通过接收这个属性并使用它。
立即学习“前端免费学习笔记(深入)”;
例如:
// 父组件
// 子组件{{ myData }}
2. 通过事件总线传递
Vue 提供了一个全局的事件总线,可以用来在组件之间传递数据。
首先,创建一个事件总线实例:
import Vue from 'vue'; const eventBus = new Vue();
然后,在需要发送数据的组件中发出一个事件:
eventBus.$emit('myEvent', { myData: 'foo' });在需要接收数据的组件中,监听这个事件并处理数据:
eventBus.$on('myEvent', function(data) {
// 使用 data.myData
});3. 通过 Vuex 存储
Vuex 是一个状态管理库,可以方便地在 Vue 组件之间共享数据。
在 Vuex store 中创建需要的状态:
import Vuex from 'vuex';
const store = new Vuex.Store({
state: {
myData: 'foo',
},
});然后,在组件中通过 mapState 和 mapActions 访问和修改 store 中的数据:
// 使用 mapState 获取状态
computed: {
...mapState([
'myData',
]),
},
// 使用 mapActions 修改状态
methods: {
...mapActions([
'setMyData',
]),
setMyData(newValue) {
this.$store.commit('setMyData', newValue);
},
},










