Vue level component communication

1. Parallel component communication

Components at the same level cannot pass values ​​directly. An intermediate bridge is needed to pass data to the public parent component first, and then the parent component passes the data to the required child components.

1.1 Define a common file eventBus.js

The code is very simple (just 2 sentences), just create an empty vue instance

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

eventBus.js1.2 Introduce files separately in peer components that need to communicate

import bus from  '../eventBus.js'

1.3 In page1.vue, by $emitpassing events and parameters to page2.vue

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

1.4 In page2.vue, $onreceive parameters and corresponding events by receiving

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