vue中兄弟组件如何传值

vue 中兄弟组件传值的方法有：1. 通过属性传递；2. 通过事件总线传递；3. 通过 vuex 存储。

Vue 中兄弟组件传值

在 Vue 应用中，兄弟组件之间需要传递数据时，可以使用以下方法：

1. 通过属性传递

在父组件中，为需要传递数据的子组件定义一个属性。子组件通过接收这个属性并使用它。

例如：

// 父组件
<template><mycomponent my-data="foo"></mycomponent></template><script>
export default {
  data() {
    return {
      myData: 'foo',
    };
  },
};
</script>

登录后复制

// 子组件
<template><p>{{ myData }}</p>
</template><script>
export default {
  props: ['myData'],
};
</script>

登录后复制

2. 通过事件总线传递

Vue 提供了一个全局的事件总线，可以用来在组件之间传递数据。

首先，创建一个事件总线实例：

import Vue from '<a style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/15721.html" target="_blank">vue</a>';

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);
  },
},

登录后复制

以上就是vue中兄弟组件如何传值的详细内容，更多请关注叮当号网其它相关文章！