這篇文章主要介紹“Vue組件中的自定義事件源碼分析”，在日常操作中，相信很多人在Vue組件中的自定義事件源碼分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue組件中的自定義事件源碼分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)北安免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

組件的自定義事件是一種組件間的通信方式，它適用于子組件向父組件傳遞數(shù)據(jù)或行為。

原理圖

組件的自定義事件注意點：

• 1.組件的自定義事件實現(xiàn)的就是子組件向父組件通信的功能，所以，自定義事件的綁定動作需要在父組件中完成

• 2.組件的自定義事件的觸發(fā)動作需要在子組件中完成，給誰綁定的事件，就找誰觸發(fā)

在了解組件的自定義事件之前，我們也了解過props，props也能實現(xiàn)子組件向父組件通信，接下來，我將從props的方式過渡到組件的自定義事件，以便大家能夠更好的理解組件的自定義事件，也可以對比這兩種方式存在的差異和相似之處

通過props實現(xiàn)組件間通信

App.vue中：

...
...

代碼片段中getName()方法中的name參數(shù)用于接收子組件傳遞過來的參數(shù)

TestA.vue：

將姓名發(fā)送給App組件
...
...

以上是用props實現(xiàn)的子組件向父組件傳遞數(shù)據(jù)

效果圖如下：

頁面初始化效果：

點擊按鈕后：

通過圖上可以看出，當點擊按鈕之后，控制臺輸出了父組件收到的數(shù)據(jù)，子組件通過props的方式向父組件傳遞了數(shù)據(jù)

通過組件的自定義事件實現(xiàn)組件間通信

首先第一步，就是要給組件綁定一個自定義事件，文章開始就說，綁定自定義事件是在父組件中完成的：

其次，在子組件中，需要對自定義事件進行觸發(fā)，完成組件自定義事件通信:

效果圖如下：

頁面初始化效果：

點擊按鈕后：

通過圖上可以看出，當點擊按之后，控制臺輸出了父組件收到的數(shù)據(jù)。

通過以上兩種通信方式，我們可以發(fā)現(xiàn)，子組件通過props方式向父組件傳遞數(shù)據(jù)，前提是父組件要給子組件傳遞一個回調(diào)函數(shù)，子組件接收之后，才能向父組件傳遞數(shù)據(jù)，而組件的自定義事件只需調(diào)用 $emit 方法對指定自定義事件進行觸發(fā)，即可向父組件傳遞數(shù)據(jù)。

組件自定義事件其他知識點

自定義組件綁定的第二種方式

App.vue:

.app{
	background-color: rgb(162, 255, 139);
	padding: 15px;
}

通過ref屬性拿到TestB組件組件的實例對象（vc），在組件掛載完成之后（mounted）使用this.$refs.組件名.$on('自定義事件名', 回調(diào)函數(shù))完成對子組件自定義事件的綁定，同樣也能實現(xiàn)效果。

而且，使用這種方式比較靈活，能完成一些操作，比如一次性自定義事件，延遲，判斷等等。

一次性自定義事件

v-on:事件名.once="XXXX
或者
this.$refs.student.$once("事件名", 事件內(nèi)容)

自定義事件的解綁

當我們使用完自定義事件后，可以解綁自定義事件，這樣做的好處是，盡量降低對程序性能的占用，提高程序運行的效率

自定義的解綁動作也是在子組件中進行，簡單來說也就是，給誰綁定的就找誰解綁

TestB中

div{
    background-color: aquamarine;
    padding: 15px;
    margin-top: 5px;
}

還有一個點就是，假若有很多自定義事件需要解綁，那可以這么寫：

{方法體內(nèi)
    this.$off();
}

直接不用傳遞任何參數(shù)，這樣寫的話，只要是給此組件綁定的任何自定義事件都會解綁。

到此，關(guān)于“Vue組件中的自定義事件源碼分析”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
分享標題：Vue組件中的自定義事件源碼分析
分享網(wǎng)址：http://weahome.cn/article/pciiie.html