Vue中兄弟组件间传值

前言

Vue中父组件向子组件传递参数时，可以通过prop；子组件向父组件传递参数时，通过$emit来传递。那么父组件下有多个子组件时怎么实现子组件间的数据传递呢？可以创建一个Vue实例作为第三方媒介实现数据的传递。

步骤一

// 在main.js文件中创建一个Vue实例 bus,然后将其挂载到Vue的原型对象中
const bus = new Vue()
Vue.prototype.$bus = bus

步骤二

然后我们就可以通过全局来使用啦，在其中的一个子组件中注册一个方法

methods: {
	// 业务处理函数中注册一个方法，例如
	lookDetails(data) {
	this.$bus.$emit('passProductType', data)
	}
}

步骤三

在另一个组件中使用就OK啦

mounted() {
    this.$bus.$on('passProductType', (data) => {
       console.log(data, '传递的数据')
    })
  },
  // 用完别忘了销毁
  beforeDestroy() {
    this.$bus.$off('passProductType')
  }