Vue父子通信 $emit 學(xué)習(xí)筆記

在學(xué)習(xí)vue之父子組件間通信時(shí)看到了 四小七 的文章 《vue之父子組件間通信實(shí)例講解(props奇适、$ref 、 $emit )》文章,收益匪淺媳握。但是對(duì)于$emit說明還是比較少,后來再查查資料總結(jié)內(nèi)如如下:

(以下引用 四小七 文章)

通過$emit 實(shí)現(xiàn)通信

上面兩種示例主要都是父組件向子組件通信磷脯,而通過$emit 實(shí)現(xiàn)子組件向父組件通信蛾找。

對(duì)于$emit官網(wǎng)上也是解釋得很朦朧,我按我自己的理解是這樣的:

vm.$emit( event, arg )

$emit 綁定一個(gè)自定義事件event赵誓,當(dāng)這個(gè)這個(gè)語句被執(zhí)行到的時(shí)候打毛,就會(huì)將參數(shù)arg傳遞給父組件,父組件通過@event監(jiān)聽并接收參數(shù)俩功。

簡(jiǎn)單來說父組件在引用的子組件元素上綁定一個(gè)自定義方法幻枉,并且指向一個(gè)方法:

<child @getMessage="showMsg"></child>??

在父組件的 methods 中定義一個(gè)方法

showMsg(title){ this.title=title; }

在子組件中可以通過$emit觸發(fā) 父組件的自定義方法,觸發(fā)方式可以直接執(zhí)行诡蜓,或者是通過綁定事件

?this.$emit('getMessage', '我是父組件熬甫!')?

@click="$emit('getMessage', '我是父組件!')"

$emit 包括兩個(gè)參數(shù)蔓罚,第一個(gè)是父組件定義的自定義方法椿肩,第二個(gè)是傳給這個(gè)自定義方法的參數(shù)

以上是引用,從上面可以看到子組件觸發(fā)父組件的自定義方法并且傳參脚粟,但是有個(gè)兩個(gè)問題覆旱。

1,子組件如何傳多個(gè)參數(shù)核无。

2扣唱,父組件和子組件如何在同時(shí)同一個(gè)方法中傳參。

通過參考

《使用$emit傳參:如何同時(shí)接收父組件和子組件的參數(shù)》

《自定義事件傳參問題》

了解到父子組件可以通過arguments參數(shù)來接收子組件的參數(shù)团南。并且子組件的參數(shù)為數(shù)組形式噪沙。

父組件

<child v-for="(item, index) in data" @custom="parentMethod(index, arguments)"></child>

子組件

this.$emit('custom', arg1, arg2);

父組件獲取到的?arguments參數(shù)為數(shù)組 [arg1,arg2],父組件的參數(shù) index和arguments 前后位置不限吐根。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末正歼,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子拷橘,更是在濱河造成了極大的恐慌局义,老刑警劉巖喜爷,帶你破解...
    沈念sama閱讀 212,222評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異萄唇,居然都是意外死亡檩帐,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,455評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門另萤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來湃密,“玉大人,你說我怎么就攤上這事四敞》涸矗” “怎么了?”我有些...
    開封第一講書人閱讀 157,720評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵忿危,是天一觀的道長(zhǎng)达箍。 經(jīng)常有香客問我,道長(zhǎng)癌蚁,這世上最難降的妖魔是什么幻梯? 我笑而不...
    開封第一講書人閱讀 56,568評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮努释,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘咬摇。我一直安慰自己伐蒂,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,696評(píng)論 6 386
  • 文/花漫 我一把揭開白布肛鹏。 她就那樣靜靜地躺著逸邦,像睡著了一般。 火紅的嫁衣襯著肌膚如雪在扰。 梳的紋絲不亂的頭發(fā)上缕减,一...
    開封第一講書人閱讀 49,879評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音芒珠,去河邊找鬼桥狡。 笑死,一個(gè)胖子當(dāng)著我的面吹牛皱卓,可吹牛的內(nèi)容都是我干的裹芝。 我是一名探鬼主播,決...
    沈念sama閱讀 39,028評(píng)論 3 409
  • 文/蒼蘭香墨 我猛地睜開眼娜汁,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼嫂易!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起掐禁,我...
    開封第一講書人閱讀 37,773評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤怜械,失蹤者是張志新(化名)和其女友劉穎颅和,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體缕允,經(jīng)...
    沈念sama閱讀 44,220評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡峡扩,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,550評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了灼芭。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片有额。...
    茶點(diǎn)故事閱讀 38,697評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖彼绷,靈堂內(nèi)的尸體忽然破棺而出巍佑,到底是詐尸還是另有隱情,我是刑警寧澤寄悯,帶...
    沈念sama閱讀 34,360評(píng)論 4 332
  • 正文 年R本政府宣布萤衰,位于F島的核電站,受9級(jí)特大地震影響猜旬,放射性物質(zhì)發(fā)生泄漏脆栋。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,002評(píng)論 3 315
  • 文/蒙蒙 一洒擦、第九天 我趴在偏房一處隱蔽的房頂上張望椿争。 院中可真熱鬧,春花似錦熟嫩、人聲如沸秦踪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,782評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽椅邓。三九已至,卻和暖如春昧狮,著一層夾襖步出監(jiān)牢的瞬間景馁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,010評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工逗鸣, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留合住,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,433評(píng)論 2 360
  • 正文 我出身青樓慕购,卻偏偏與公主長(zhǎng)得像聊疲,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子沪悲,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,587評(píng)論 2 350

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

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容获洲,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,046評(píng)論 0 29
  • 1.安裝 可以簡(jiǎn)單地在頁面引入Vue.js作為獨(dú)立版本殿如,Vue即被注冊(cè)為全局變量贡珊,可以在頁面使用了最爬。 如果希望搭建...
    Awey閱讀 11,002評(píng)論 4 129
  • VUE介紹 Vue的特點(diǎn)構(gòu)建用戶界面,只關(guān)注View層簡(jiǎn)單易學(xué)门岔,簡(jiǎn)潔爱致、輕量、快速漸進(jìn)式框架 框架VS庫(kù)庫(kù)寒随,是一封裝...
    多多醬_DuoDuo_閱讀 2,689評(píng)論 1 17
  • 前言 您將在本文當(dāng)中了解到,往網(wǎng)頁中添加數(shù)據(jù),從傳統(tǒng)的dom操作過渡到數(shù)據(jù)層操作,實(shí)現(xiàn)同一個(gè)目標(biāo),兩種不同的方式....
    itclanCoder閱讀 25,764評(píng)論 1 12
  • 組件是 vue.js 最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的讯泣,這就意味著不同組件之間的數(shù)據(jù)無法相互引用纫普。...
    四小七閱讀 20,333評(píng)論 17 115