Vue 解决兄弟组件之间传值问题

vue中 父组件向子组件传递参数时，可以通过prop来传递参数，prop可以是数组形式，也可以是对象格式，子向父组件传递参数时，通过$emit来传递，$emit（'方法名', 传参），来实现子组件和父组件数据交互，但是在父组件中，有好多个子组件，这些子组件怎么样来进行数据通讯呢？

有的同学会立马想到 vuex ，答案是：可以的，但是会不会大材小用？，在项目中，只是个别组件需要用到通讯，我们是不会优先考虑vuex来解决的。

下面我们可以使用一个特别好用的方法来实现兄弟组件之间数据通讯

bus.js 顾名思义 巴士，所有人都可以上车，不管你在哪里，不管你是什么组件，我都可以开车过去接你。

bus可以通过两种方式来实现：

1.通过创建.js文件局部方式来实现，在需要用到的组件中引入，然后调用它即可

在项目的utils文件中创建一个js文件，在正常的项目种，会用utils来存放哪些共用的js文件，这些js文件是一些常用的方法或例如这个bus 

// bus.js
import Vue from 'vue';
export default new Vue();

接下来，哪个组件需要发车你就在哪里import给它建立一个发车点

// 在 vue组件中引入
import bus from "../../utils/bus";

然后这里我们在vue的实例中的methods函数中定义一个方法来触发这个bus发车

methods: {
      busFun(data) {
        // 通过 $emit 来触发方法，参数1 是定义方法名，参数2 是你要发送的数据
        bus.$emit('name', data)
      },
    }

这里千万要注意了，若你使用多个bus 那么参数1命名千万别重复，否则其他组件会出现无故上车的情况，这个bus中可以给无数个组件使用，但是命名不能重复，除非你创建多个bus。

接下来我们就看看这辆巴士有哪个组件要上车。

同样，如果其他组件要上车，我们必须要在这个组件中设立一个车站，不然巴士不知道要在哪里接这个组件。

// 这个组件需要上车，我们先设立一个车站
import bus from "../../utils/bus";

设立车站后，我们就需要通过 bus.$on来触发，也就是上车的技能

 created() {
      bus.$on('name', (data) => {
        console.log(data, '上车成功');
      })
    },
    // 打卡
    beforeDestroy() {
      bus.$off('name');
    },

这里会有同学会疑惑，为什么上车后需要打卡？？？

我们先说从上往下说吧，首先我们必须要在 vue 的created钩子函数中来触发这个bus，在页面还没加载的时候我们先触发它然后拿到数据，在created中执行，我们可以避免很多坑，例如触发bus无法拿到数据等问题(想了解的同学去问度娘，这里就不说明了)。

然后我们每次触发这个bus的时候，我们必须在整个生命周期走完的时候将这个bus给移除掉。

简单粗暴的说，就是我们每个组件上车的时候，我们必须要给它打卡掉，让后面的bus知道这个组件已经上车了，不需要在这里等待，接到就开走，头都不回的那种。

执行beforeDestroy来销毁这个bus方法，是避免方法“冗余”，若不清除这个方法，那将会出现多个bus触发，每次都会将这辆bus停留在这个vue的生命周期中，打开控制台你会发现有好多辆bus在这里停留，因为我们每次触发bus时，就会开一辆巴士出来，而不是这辆巴士一直重复开的原因。

2.接下来我们就说一下第二种方式：

// 我们在main.js中用常量创建一个bus，然后将它放入Vue实例的原型对象中。
const bus = new Vue()
Vue.prototype.$bus = bus;

然后我们就可以在全局 通过this.$bus来开巴士了（#滑稽）。接下来只要开稳就可以为所欲为了。

 created() {
      this.$bus.$on('name', (data) => {
        console.log(data, '上车成功');
      })
    },
    // 打卡
    beforeDestroy() {
      this.$bus.$off('name');
    },

最后别忘了给乘客打卡哦！