Vue中全局事件总线$bus使用

一、介绍

说明：Vue中，$bus 指的通常是一个全局事件总线，它是一种用于在不同组件之间进行通信的模式。它允许你在一个组件中发出事件，而其他组件可以监听并响应这些事件。

二、使用

1、在main.js中的beforecreate声明周期函数钩子中添加$bus

  beforeCreate() {

    // 注册
    Vue.prototype.$API = API
    // 注册全局事件总线$bus
    Vue.prototype.$bus = this
  },

2、在需要使用的组件中使用。要配合$emit和$on使用

$emit:触发当前实例上的事件。附加参数都会传给监听器回调。

$on:监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

相当于$emit发，$on收。这样就实现了组件(父子、兄弟等)通信。且可以传递参数；$on接收后可执行相应的回调函数

1）发的组件：有一个点击事件的回调函数，在回调函数中使用$bus将参数传递给另一个组件

  methods: {
    changeIndex(index) {
      this.currentIndex = index
      // 参数：1.名称(应该找谁发或者收),2.参数
      this.$bus.$emit('changeImg', index)
    }
  }

2）收的组件：index为传递的参数，执行后面的箭头函数中的内容

// 兄弟组件通信
    // 全局事件总线，获取兄弟组件传递过来的索引值
    this.$bus.$on('changeImg', (index) => {
      // 修改当前响应式索引值
      this.currentIndex = index
    })

效果：发的组件 可以改变 收的组件 中的currentIndex值。

总结：$bus全局事件总线使用广泛，可以实现多重身份组件之间的通信。且可传递参数，执行回调。