1. 第一種方式就是官方推薦的

官方推薦方式

有時(shí)候兩個(gè)組件也需要通信(非父子關(guān)系)。在簡(jiǎn)單的場(chǎng)景下，可以使用一個(gè)空的 Vue 實(shí)例作為中央事件總線。

本質(zhì)是通過(guò)派發(fā)事件然后監(jiān)聽(tīng)事件從而更改值，(父子組件通信也可用這個(gè)方式，但是不同的一點(diǎn)就是父子組件通信的時(shí)候可以不用一個(gè)空的Vue實(shí)例來(lái)做中轉(zhuǎn)，這種方式我這里就不做演示的了，因?yàn)槲业念}目是非父子通信)

空的Vue實(shí)例 bus

import Vue from 'vue'const bus = new Vue()export default bus

組件add

<!--html結(jié)構(gòu)--><template> <div>  <p>我是add組件的num:{{num}} </p>  <button @click='add'>增加</button> </div></template>

// js<script>import bus from '../bus.js'export default { data() {  return {   num: ''  } }, methods: {  add() {   if (this.num) {    this.num++    bus.$emit('num-change', this.num)   } else {    this.num = 1    bus.$emit('num-change', this.num)   }  } }}</script>

組件sub

<!--html結(jié)構(gòu)--><template> <div>  <p>我是sub組件的num:{{num}}</p> </div></template>

// js<script>import bus from '../bus.js'export default { data() {  return {   num: ''  } }, created() {  bus.$on('num-change', num => {   this.num = num  }) }}</script>

2.通過(guò)vuex來(lái)進(jìn)行狀態(tài)管理

官方狀態(tài)管理

vuex我這里就不詳細(xì)說(shuō)了，網(wǎng)上教程太多。

3.取巧利用js中的對(duì)象的特性（指針）

Object在內(nèi)存中存儲(chǔ)只是保留指針，所以父組件通過(guò)props來(lái)給兄弟組件傳遞同一個(gè)對(duì)象，兄弟組件接收的對(duì)象跟父組件的對(duì)象都是指向同一個(gè)內(nèi)存地址，故不管在哪里修改都能保持一致。

上代碼，父組件把同一個(gè)對(duì)象傳遞給add組件和sub組件，那么add組件和sub組件接收到的對(duì)象也是指向父組件app的對(duì)象都是指向同一個(gè)內(nèi)存地址。add組件對(duì)傳入的對(duì)象進(jìn)行+1的操作，sub組件進(jìn)行-1的操作。

父組件 app.vue

<!--html結(jié)構(gòu)--><template> <div id="app">  <h1>我是app父組件的newNum:{{share.newNum}}</h1>  <hr>  <!--將同一個(gè)對(duì)象同時(shí)傳給兩個(gè)子組件-->  <addnum :share1='share'></addnum>  <hr>  <subnum :share2='share'></subnum> </div></template>

// jsimport addnum from './components/add'import subnum from './components/sub'export default { data() {  return {   share: {    newNum: 1   }  } }, components: {  addnum, subnum }}

子組件add.vue