在學(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 前后位置不限吐根。