資訊專欄INFORMATION COLUMN
摘要：第一種方式就是官方推薦的官方推薦方式有時(shí)候兩個(gè)組件也需要通信非父子關(guān)系。在簡(jiǎn)單的場(chǎng)景下，可以使用一個(gè)空的實(shí)例作為中央事件總線。組件對(duì)傳入的對(duì)象進(jìn)行的操作，組件進(jìn)行的操作。
1. 第一種方式就是官方推薦的
官方推薦方式
有時(shí)候兩個(gè)組件也需要通信(非父子關(guān)系)。在簡(jiǎn)單的場(chǎng)景下，可以使用一個(gè)空的 Vue 實(shí)例作為中央事件總線。
本質(zhì)是通過派發(fā)事件然后監(jiān)聽事件從而更改值，(父子組件通信也可用這個(gè)方式，但是不同的一點(diǎn)就是父子組件通信的時(shí)候可以不用一個(gè)空的Vue實(shí)例來做中轉(zhuǎn)，這種方式我這里就不做演示的了，因?yàn)槲业念}目是非父子通信)
空的Vue實(shí)例 bus
import Vue from "vue" const bus = new Vue() export default bus
組件add
我是add組件的num:{{num}}
// js
組件sub
我是sub組件的num:{{num}}
// js
效果圖
2.通過vuex來進(jìn)行狀態(tài)管理3.取巧利用js中的對(duì)象的特性（指針）官方狀態(tài)管理
vuex我這里就不詳細(xì)說了，網(wǎng)上教程太多。
Object在內(nèi)存中存儲(chǔ)只是保留指針，所以父組件通過props來給兄弟組件傳遞同一個(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
我是app父組件的newNum:{{share.newNum}}
// js
import addnum from "./components/add"
import subnum from "./components/sub"
export default {
data() {
return {
share: {
newNum: 1
}
}
},
components: {
addnum, subnum
}
}
子組件add.vue
我是add組件的newNum:{{share1.newNum}}
//js
子組件sub.vue
我是sub組件的newNum:{{share2.newNum}}
// js
效果圖
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83744.html
摘要：它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。狀態(tài)自管理應(yīng)用包含以下幾個(gè)部分，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源，以聲明方式將映射到視圖，響應(yīng)在上的用戶輸入導(dǎo)致的狀態(tài)變化。 事情發(fā)生在上周（2019-06-06）團(tuán)隊(duì)技術(shù)分享的時(shí)候。起因在于一個(gè)問題：vue 中多個(gè)組件如何使用同一個(gè)變量，我們叫這個(gè)變量為 baseConfig 吧。說實(shí)話我沒想到那么多人不理解...
摘要：前端日?qǐng)?bào)精選深入理解綁定請(qǐng)使用千位分隔符逗號(hào)表示網(wǎng)頁中的大數(shù)字跨頁面通信的各種姿勢(shì)你所不知道的濾鏡技巧與細(xì)節(jié)代碼質(zhì)量管控復(fù)雜度檢測(cè)中文翻譯基于與的三種代碼分割范式掘金系列如何構(gòu)建應(yīng)用程序冷星的前端雜貨鋪第期美團(tuán)旅行前端技術(shù)體系 2017-09-16 前端日?qǐng)?bào) 精選 深入理解 js this 綁定請(qǐng)使用千位分隔符(逗號(hào))表示web網(wǎng)頁中的大數(shù)字跨頁面通信的各種姿勢(shì)你所不知道的 CSS 濾...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
閱讀 2613·2021-09-26 10:17
閱讀 3236·2021-09-22 15:16
閱讀 2145·2021-09-03 10:43
閱讀 3270·2019-08-30 11:23
閱讀 3667·2019-08-29 13:23
閱讀 1315·2019-08-29 11:31
閱讀 3699·2019-08-26 13:52
閱讀 1404·2019-08-26 12:22
