Vue 組件間通信有哪幾種方式?

(1)props / emit 適用 父子組件通信 這種方法是 Vue 組件的基礎(chǔ)躏鱼,相信大部分同學(xué)耳聞能詳,所以此處就不舉例展開(kāi)介紹殷绍。 (2)ref 與parent / $children 適用 父子組件通信

ref:如果在普通的 DOM 元素上使用染苛,引用指向的就是 DOM 元素;如果用在子組件上主到,引用就指向組件實(shí)例
parent /children:訪問(wèn)父 / 子實(shí)例

(3)EventBus (emit /on) 適用于 父子茶行、隔代、兄弟組件通信
這種方法通過(guò)一個(gè)空的 Vue 實(shí)例作為中央事件總線(事件中心)登钥,用它來(lái)觸發(fā)事件和監(jiān)聽(tīng)事件畔师,從而實(shí)現(xiàn)任何組件間的通信,包括父子牧牢、隔代看锉、兄弟組件姿锭。
(4)attrs/listeners 適用于 隔代組件通信

attrs:包含了父作用域中不被 prop 所識(shí)別 (且獲取) 的特性綁定 ( class 和 style 除外 )。當(dāng)一個(gè)組件沒(méi)有聲明任何 prop 時(shí)伯铣,這里會(huì)包含所有父作用域的綁定 ( class 和 style 除外 )艾凯,并且可以通過(guò) v-bind="attrs" 傳入內(nèi)部組件。通常配合 inheritAttrs 選項(xiàng)一起使用懂傀。
listeners:包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽(tīng)器趾诗。它可以通過(guò) v-on="listeners" 傳入內(nèi)部組件

(5)provide / inject 適用于 隔代組件通信
祖先組件中通過(guò) provider 來(lái)提供變量,然后在子孫組件中通過(guò) inject 來(lái)注入變量蹬蚁。 provide / inject API 主要解決了跨級(jí)組件間的通信問(wèn)題恃泪,不過(guò)它的使用場(chǎng)景,主要是子組件獲取上級(jí)組件的狀態(tài)犀斋,跨級(jí)組件間建立了一種主動(dòng)提供與依賴(lài)注入的關(guān)系贝乎。
(6)Vuex 適用于 父子、隔代叽粹、兄弟組件通信
Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式览效。每一個(gè) Vuex 應(yīng)用的核心就是 store(倉(cāng)庫(kù))〕婕福“store” 基本上就是一個(gè)容器锤灿,它包含著你的應(yīng)用中大部分的狀態(tài) ( state )。

Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的辆脸。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候但校,若 store 中的狀態(tài)發(fā)生變化,那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新啡氢。
改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation状囱。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末倘是,一起剝皮案震驚了整個(gè)濱河市亭枷,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌搀崭,老刑警劉巖叨粘,帶你破解...
    沈念sama閱讀 217,277評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異门坷,居然都是意外死亡宣鄙,警方通過(guò)查閱死者的電腦和手機(jī)袍镀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門(mén)默蚌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人苇羡,你說(shuō)我怎么就攤上這事绸吸。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,624評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵锦茁,是天一觀的道長(zhǎng)攘轩。 經(jīng)常有香客問(wèn)我,道長(zhǎng)码俩,這世上最難降的妖魔是什么度帮? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,356評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮稿存,結(jié)果婚禮上笨篷,老公的妹妹穿的比我還像新娘。我一直安慰自己瓣履,他們只是感情好率翅,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著袖迎,像睡著了一般冕臭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上燕锥,一...
    開(kāi)封第一講書(shū)人閱讀 51,292評(píng)論 1 301
  • 那天辜贵,我揣著相機(jī)與錄音,去河邊找鬼归形。 笑死念颈,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的连霉。 我是一名探鬼主播榴芳,決...
    沈念sama閱讀 40,135評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼跺撼!你這毒婦竟也來(lái)了窟感?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 38,992評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤歉井,失蹤者是張志新(化名)和其女友劉穎柿祈,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體哩至,經(jīng)...
    沈念sama閱讀 45,429評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡躏嚎,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了菩貌。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片卢佣。...
    茶點(diǎn)故事閱讀 39,785評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖箭阶,靈堂內(nèi)的尸體忽然破棺而出虚茶,到底是詐尸還是另有隱情戈鲁,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評(píng)論 5 345
  • 正文 年R本政府宣布嘹叫,位于F島的核電站婆殿,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏罩扇。R本人自食惡果不足惜婆芦,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望喂饥。 院中可真熱鬧寞缝,春花似錦、人聲如沸仰泻。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,723評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)集侯。三九已至被啼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間棠枉,已是汗流浹背浓体。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,858評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留辈讶,地道東北人命浴。 一個(gè)月前我還...
    沈念sama閱讀 47,891評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像贱除,于是被迫代替她去往敵國(guó)和親生闲。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • Vue 組件間通信是面試常考的知識(shí)點(diǎn)之一扯躺,這題有點(diǎn)類(lèi)似于開(kāi)放題捉兴,你回答出越多方法當(dāng)然越加分,表明你對(duì) Vue 掌握...
    倚劍闖天涯_閱讀 1,045評(píng)論 0 2
  • 前言 組件是 vue.js最強(qiáng)大的功能之一录语,而組件實(shí)例的作用域是相互獨(dú)立的倍啥,這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引...
    用技術(shù)改變世界閱讀 2,164評(píng)論 1 3
  • 摘要: 總有一款合適的通信方式。 作者:浪里行舟 Fundebug經(jīng)授權(quán)轉(zhuǎn)載澎埠,版權(quán)歸原作者所有虽缕。 前言 組件是 v...
    Fundebug閱讀 15,574評(píng)論 3 57
  • 前言 組件是 vue.js最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的失暂,這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引...
    浪里行舟閱讀 8,255評(píng)論 0 49
  • 前言 組件是 vue.js最強(qiáng)大的功能之一彼宠,而組件實(shí)例的作用域是相互獨(dú)立的鳄虱,這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引...
    7abbcd54a89d閱讀 711評(píng)論 0 1