vue兄弟组件之间传值

在Vue框架中，兄弟组件之间的数据传递是一种常见需求，它们虽在同一根组件下，但并无直接的父子关系。那么，它们之间如何传递数据呢？让我们一起探索。

我们要明确的是，兄弟组件之间默认是没有直接的数据交流方式的。但我们可以借助一些策略来实现数据的传递。目前主要有两种方式：一种是利用父子组件作为中介进行传递，另一种是创建一个公共的Vue实例来实现事件的发出和监听。

我们先来看看第一种方式。在组件结构相对简单的情况下，子组件可以先将数据传递给其父组件，然后由父组件再传递给另一个子组件，这样实现了兄弟组件间的数据传递。这种方式虽然可行，但在大型项目中可能会使代码变得复杂且难以维护。

接下来，我们重点介绍一下第二种方式。这种方式是通过创建一个公共的Vue实例来实现的。我们需要导出一个Vue实例作为中介，然后在子组件中通过该实例发出事件。这是一个简单的操作示范：

在Vue实例中：

```javascript

import Vue from 'vue';

export default new Vue();

```

接着，在子组件中引入这个公共的Vue实例，并通过实例来发出事件。例如：

```javascript

methods: {

tellname () {

// 发出事件，传递数据，自定义事件为'givename'

bus.$emit('givename', this.mybfname);

}

}

```

然后，在另一个子组件中也引入这个公共Vue实例，通过实例来监听事件并接收数据：

```javascript

import bus from '@/utils/myvue.js';

mounted () {

// 组件一加载就进行兄弟组件所发出的事件的监听

bus.$on('givename', (data) => {

console.log(data);

this.mysbfname = data;

});

}

```

通过这种方式，我们就可以实现兄弟组件之间的数据传递。这种方式的优点是简单易行，适合在中小型项目中应用。但在大型项目中，可能需要考虑使用更为复杂的状态管理方案，如Vuex等。关于兄弟组件之间的数据传值方式，我们就分享到这里。在实际开发中，可以根据项目需求和团队习惯选择合适的方式。