vue 平级组件通信

1、平级组件通信

同级组件不能直接传值，需要一个中间桥梁，可以先将数据传递给公共的父组件，然后父组件再将数据传递给需要的子组件。

1.1 定义一个公共文件 eventBus.js

代码很简单(就2句)，只是创建一个空的vue实例

import Vue from 'vue'
export default new Vue()

1.2 在需要通信的同级组件中分别引入eventBus.js文件

import bus from  '../eventBus.js'

1.3 在page1.vue中，通过$emit将事件和参数传递给page2.vue

price(newPrice){
          bus.$emit('priceChange',newPrice,this.count) 
} 

1.4 在page2.vue 中，通过$on接收接收参数和相应事件

bus.$on("priceChange", (price, count) => {
      this.balance = this.totalMoney - price * count;
    });