一声功、$emit
1、this $emit('自定義時(shí)間名',要傳送的數(shù)據(jù))国夜;
2减噪、觸發(fā)當(dāng)前實(shí)例上的時(shí)間,要傳遞的數(shù)據(jù)會(huì)傳給監(jiān)聽器车吹;
二、$on
1醋闭、VM.$on('事件名',callback)??? --------------------callback回調(diào)$emit要傳送的數(shù)據(jù)窄驹;
2、監(jiān)聽當(dāng)前實(shí)例上自定義時(shí)間证逻;
三乐埠、接下來我們通過一個(gè)實(shí)例來解釋
1、想要實(shí)現(xiàn)的
點(diǎn)擊上一頁囚企、下一頁丈咐,分別展現(xiàn)那頁的內(nèi)容。
廢話不多說龙宏,上代碼
以下是子組件
父組件代碼
首先簡單的點(diǎn)擊事件不同去過多的描述棵逊,使用v-on:click就可以了,然后在methods里寫上判斷就可以實(shí)現(xiàn)了银酗。
簡單來說辆影,就是子組件pagination想要傳遞curpage給父組件tabs,父組件需要接收到curpage并且要告知子組件黍特,不然子組件完全不知道蛙讥。
這里需要強(qiáng)調(diào)的一點(diǎn)是:on和emit事件必須是在一個(gè)公共的實(shí)例上才能觸發(fā)。
子組件說:父組件你挺好了灭衷,我用$eimt把數(shù)據(jù)傳給你啊次慢,你記得看看有沒有拿到啊。
父組件說:好的,不怕迫像,我有$on這個(gè)東東拭抬,我可以隨時(shí)監(jiān)聽到你傳了啥,你傳給我什么侵蒙,我就變成什么唄造虎,沒辦法,你傳給我的纷闺,我是要跟隨你的算凿。
旁白:但是你們兩必須得在一個(gè)世界啊,別一個(gè)在二次元犁功,一個(gè)在三次元氓轰,那樣沒法傳啊。這樣吧浸卦,你們都必須保證在同一個(gè)地方吧署鸡。
子組件:好,那我這邊有一個(gè)bus限嫌,父組件那也有一個(gè)bus靴庆,那我們兩都到那吧。
旁白:一定要記住你們可以使用一個(gè)空的 Vue 實(shí)例作為中央事件總線怒医。畢竟性別不同怎么談戀愛啊炉抒。
網(wǎng)上百度千篇一律全是使用$emit來實(shí)現(xiàn)稚叹,可是都有一個(gè)嚴(yán)重的誤區(qū)沒有給別人說明焰薄,開始我都按照搜索的結(jié)果進(jìn)行操作,都會(huì)出現(xiàn)子組件$emit后父組件沒有監(jiān)聽到函數(shù)的變化扒袖,研究了好久才發(fā)現(xiàn)$emit和$on的事件必須在一個(gè)公共的實(shí)例上塞茅,才能夠觸發(fā)。我的操作如下:
首先在main.js里新加bus作為一個(gè)公共的實(shí)例季率,如下圖