說一說$emit和$on

1、$emit

一、this $emit（'自定義事件名',要傳送的數據）；

二、觸發當前實例上的事件，要傳遞的數據會傳給監聽器；

2、$on

一、VM.$on('事件名',callback)    --------------------callback回調$emit要傳送的數據；

二、監聽當前實例上自定義事件；

3、接下來咱們經過一個實例來解釋

一、想要實現的

點擊上一頁、下一頁，分別展示那頁的內容。

數據刷新

廢話很少說，上代碼

如下是子組件

子組件部分代碼

子組件js部分

父組件代碼

 

父組件部分代碼

 

父組件js部分

首先簡單的點擊事件不一樣去過多的描述，使用v-on：click就能夠了，而後在methods裏寫上判斷就能夠實現了。

簡單來講，就是子組件pagination想要傳遞curpage給父組件tabs，父組件須要接收到curpage而且要告知子組件，否則子組件徹底不知道。

這裏須要強調的一點是：on和emit事件必須是在一個公共的實例上才能觸發。

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

父組件說：好的，不怕，我有$on這個東東，我能夠隨時監聽到你傳了啥，你傳給我什麼，我就變成什麼唄，沒辦法，你傳給個人，我是要跟隨你的。

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

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

旁白：必定要記住大家可使用一個空的 Vue 實例做爲中央事件總線。畢竟性別不一樣怎麼談戀愛啊。

父組件在created裏面定義$on監聽事件在子組件中定義點擊事件，調用父組件方法經過$emit將相應值傳給父組件

網上百度千篇一概全是使用$emit來實現，但是都有一個嚴重的誤區沒有給別人說明，開始我都按照搜索的結果進行操做，都會出現子組件$emit後父組件沒有監聽到函數的變化，研究了很久才發現$emit和$on的事件必須在一個公共的實例上，纔可以觸發。個人操做以下：

首先在main.js裏新加bus做爲一個公共的實例，以下圖

 

bus全局

 

在子組件中經過$emit觸發組件

 

在父組件中經過$on監聽組件