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

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

(以下引用 四小七 文章)

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

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

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

vm.$emit( event, arg )

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

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

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

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

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

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

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

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

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

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

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

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

通過(guò)參考

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

《自定義事件傳參問(wèn)題》

了解到父子組件可以通過(guò)arguments參數(shù)來(lái)接收子組件的參數(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)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,177評(píng)論 0 29
  • 1.安裝 可以簡(jiǎn)單地在頁(yè)面引入Vue.js作為獨(dú)立版本,Vue即被注冊(cè)為全局變量,可以在頁(yè)面使用了。 如果希望搭建...
    Awey閱讀 11,297評(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,855評(píng)論 1 17
  • 前言 您將在本文當(dāng)中了解到,往網(wǎng)頁(yè)中添加數(shù)據(jù),從傳統(tǒng)的dom操作過(guò)渡到數(shù)據(jù)層操作,實(shí)現(xiàn)同一個(gè)目標(biāo),兩種不同的方式....
    itclanCoder閱讀 26,244評(píng)論 1 12
  • 組件是 vue.js 最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引用。...
    四小七閱讀 20,515評(píng)論 17 114

友情鏈接更多精彩內(nèi)容