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

創(chuàng)新互聯(lián)建站專注于企業(yè)網(wǎng)絡(luò)營(yíng)銷推廣、網(wǎng)站重做改版、宜川網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、購(gòu)物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為宜川等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

官方推薦方式

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

本質(zhì)是通過(guò)派發(fā)事件然后監(jiān)聽事件從而更改值，(父子組件通信也可用這個(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

// js

組件sub

// js

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

// js
import addnum from './components/add'
import subnum from './components/sub'

export default {
 data() {
  return {
   share: {
    newNum: 1
   }
  }
 },
 components: {
  addnum, subnum
 }
}

子組件add.vue

//js

子組件sub.vue

// js

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。