vue組件之間的通信

vue之間通信也挺簡(jiǎn)單的澜倦,用到的場(chǎng)景挺多的聚蝶,簡(jiǎn)單說(shuō)下。

1 父組件向子組件傳遞數(shù)據(jù)

子組件在父組件的并作為標(biāo)簽引入藻治,通過(guò)設(shè)置標(biāo)簽的屬性傳遞數(shù)據(jù)碘勉,在子組件用props接受,桩卵,例如下面這樣验靡,父組件parent.vue引入子組件child.vue,將父組件的數(shù)據(jù)name通過(guò)設(shè)置標(biāo)簽child的name屬性傳遞給子組件雏节,子組件通過(guò)props傳遞接受胜嗓,接受后,在子組件內(nèi)this.name就是父組件的name數(shù)據(jù)矾屯。

parent.vue:

parent.vue

child.vue:


child.vue

2 子組件向父組件傳遞數(shù)據(jù)

? ? 子組件通過(guò)$emit方法傳遞數(shù)據(jù)兼蕊,emit第一個(gè)是事件,后面的是傳遞的參數(shù)件蚕,父組件在子組件的標(biāo)簽接受方法并處理

child.vue


child

parent.vue


parent

3 父組件調(diào)用子組件的方法

子組件需要根據(jù)父組件的方法進(jìn)行處理,通常會(huì)寫一個(gè)方法产禾。在父組件數(shù)據(jù)變動(dòng)的情況下排作,就需要調(diào)用子組件的方法。我們可以在父組件內(nèi)將子組件通過(guò)喲ref注冊(cè)亚情,然后用$refs調(diào)用子組件的方法

parent

4 兄弟組件傳遞數(shù)據(jù)

可以通過(guò)子組件a用$emit觸發(fā)妄痪,在子組件b的mounted階段用$on接收處理。還可以通過(guò)組件a通過(guò)$emit觸發(fā)楞件,父組件接受衫生,然后調(diào)用子組件b的方法去修改組件B里的值裳瘪。兄弟組件我基本上沒(méi)用到,就不上圖了罪针。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末彭羹,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子泪酱,更是在濱河造成了極大的恐慌派殷,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,948評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件墓阀,死亡現(xiàn)場(chǎng)離奇詭異毡惜,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)斯撮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門经伙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人勿锅,你說(shuō)我怎么就攤上這事橱乱。” “怎么了粱甫?”我有些...
    開封第一講書人閱讀 157,490評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵泳叠,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我茶宵,道長(zhǎng)危纫,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,521評(píng)論 1 284
  • 正文 為了忘掉前任乌庶,我火速辦了婚禮种蝶,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘瞒大。我一直安慰自己螃征,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,627評(píng)論 6 386
  • 文/花漫 我一把揭開白布透敌。 她就那樣靜靜地躺著盯滚,像睡著了一般。 火紅的嫁衣襯著肌膚如雪酗电。 梳的紋絲不亂的頭發(fā)上魄藕,一...
    開封第一講書人閱讀 49,842評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音撵术,去河邊找鬼背率。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的寝姿。 我是一名探鬼主播交排,決...
    沈念sama閱讀 38,997評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼饵筑!你這毒婦竟也來(lái)了埃篓?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,741評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤翻翩,失蹤者是張志新(化名)和其女友劉穎都许,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體嫂冻,經(jīng)...
    沈念sama閱讀 44,203評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡胶征,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,534評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了桨仿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片睛低。...
    茶點(diǎn)故事閱讀 38,673評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖服傍,靈堂內(nèi)的尸體忽然破棺而出钱雷,到底是詐尸還是另有隱情,我是刑警寧澤吹零,帶...
    沈念sama閱讀 34,339評(píng)論 4 330
  • 正文 年R本政府宣布罩抗,位于F島的核電站,受9級(jí)特大地震影響灿椅,放射性物質(zhì)發(fā)生泄漏套蒂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,955評(píng)論 3 313
  • 文/蒙蒙 一茫蛹、第九天 我趴在偏房一處隱蔽的房頂上張望操刀。 院中可真熱鬧,春花似錦婴洼、人聲如沸骨坑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)欢唾。三九已至,卻和暖如春警没,著一層夾襖步出監(jiān)牢的瞬間匈辱,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工杀迹, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,394評(píng)論 2 360
  • 正文 我出身青樓树酪,卻偏偏與公主長(zhǎng)得像浅碾,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子续语,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,562評(píng)論 2 349

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

  • 組件(Component)是Vue.js最核心的功能垂谢,也是整個(gè)架構(gòu)設(shè)計(jì)最精彩的地方,當(dāng)然也是最難掌握的疮茄。...
    六個(gè)周閱讀 5,587評(píng)論 0 32
  • 前言 我們平時(shí)做一個(gè)工程項(xiàng)目滥朱,每個(gè)功能模塊之間是相互獨(dú)立的,彼此之間按理歷史自理門戶的力试,但是難眠會(huì)相互通信徙邻,而且還...
    i5yue閱讀 273評(píng)論 1 0
  • 在Vue中組件實(shí)例之間的作用域是孤立的怖糊,以為不能直接在子組件上引用父組件的數(shù)據(jù)帅容,同時(shí)父組件也不能直接使用子組件的數(shù)...
    秋天下雨淋濕冬天閱讀 3,445評(píng)論 0 2
  • 組件通訊 父?jìng)髯?通過(guò)在標(biāo)簽綁定數(shù)據(jù) props:['mag'] 子傳遞父 //子:定義一個(gè)自定義事件 t...
    人言可畏_0292閱讀 196評(píng)論 0 0
  • 對(duì)于吃有三個(gè)通俗的標(biāo)準(zhǔn),而我一直生活在第一個(gè)標(biāo)準(zhǔn)之中伍伤。標(biāo)準(zhǔn)一并徘,不管吃啥,管飽就行扰魂。標(biāo)準(zhǔn)二麦乞,專吃些自己喜歡吃的東西,...
    yjfthu2012閱讀 248評(píng)論 0 0