一、$emit

1、this $emit（'自定義時間名',要傳送的數(shù)據(jù)）；

2、觸發(fā)當(dāng)前實例上的時間，要傳遞的數(shù)據(jù)會傳給監(jiān)聽器；

二、$on

1、VM.$on('事件名',callback)??? --------------------callback回調(diào)$emit要傳送的數(shù)據(jù)；

2、監(jiān)聽當(dāng)前實例上自定義時間；

三、接下來我們通過一個實例來解釋

1、想要實現(xiàn)的

點擊上一頁、下一頁，分別展現(xiàn)那頁的內(nèi)容。

數(shù)據(jù)刷新

廢話不多說，上代碼

以下是子組件

子組件部分代碼

子組件js部分

父組件代碼

父組件部分代碼

父組件js部分

首先簡單的點擊事件不同去過多的描述，使用v-on：click就可以了，然后在methods里寫上判斷就可以實現(xiàn)了。

簡單來說，就是子組件pagination想要傳遞curpage給父組件tabs，父組件需要接收到curpage并且要告知子組件，不然子組件完全不知道。

這里需要強調(diào)的一點是：on和emit事件必須是在一個公共的實例上才能觸發(fā)。

子組件說：父組件你挺好了，我用$eimt把數(shù)據(jù)傳給你啊，你記得看看有沒有拿到啊。

父組件說：好的，不怕，我有$on這個東東，我可以隨時監(jiān)聽到你傳了啥，你傳給我什么，我就變成什么唄，沒辦法，你傳給我的，我是要跟隨你的。

旁白：但是你們兩必須得在一個世界啊，別一個在二次元，一個在三次元，那樣沒法傳啊。這樣吧，你們都必須保證在同一個地方吧。

子組件：好，那我這邊有一個bus，父組件那也有一個bus，那我們兩都到那吧。

旁白：一定要記住你們可以使用一個空的 Vue 實例作為中央事件總線。畢竟性別不同怎么談戀愛啊。

父組件在created里面定義$on監(jiān)聽事件在子組件中定義點擊事件，調(diào)用父組件方法通過$emit將相應(yīng)值傳給父組件

網(wǎng)上百度千篇一律全是使用$emit來實現(xiàn)，可是都有一個嚴(yán)重的誤區(qū)沒有給別人說明，開始我都按照搜索的結(jié)果進行操作，都會出現(xiàn)子組件$emit后父組件沒有監(jiān)聽到函數(shù)的變化，研究了好久才發(fā)現(xiàn)$emit和$on的事件必須在一個公共的實例上，才能夠觸發(fā)。我的操作如下：

首先在main.js里新加bus作為一個公共的實例，如下圖

bus全局

在子組件中通過$emit觸發(fā)組件

在父組件中通過$on監(jiān)聽組件