從Node.js事件觸發(fā)器到Vue自定義事件的深入講解
Node.js中的事件觸發(fā)器所引發(fā)的思考
今天在看 Node.js 文檔的時候講到事件觸發(fā)器，其中的 emit 方法讓我想到了 Vue 中的自定義事件，借此我對 Vue 又有了新的理解，所以將我的理解記錄下來，留作學(xué)習(xí)筆記。
Node.js中的事件觸發(fā)器
Node.js 為我們提供了一個事件模塊：EventEmitter，我們可以用它來處理事件
const EventEmitter = require('events')
const eventEmitter = new EventEmitter()
eventEmitter 對象上有兩個方法：on 和 emit
- on 用于添加自定義事件，注冊回調(diào)函數(shù)
- emit 用于觸發(fā)事件，并將參數(shù)傳遞給回調(diào)函數(shù)
eventEmitter.on('start', (e) => {
console.log(e)
})
eventEmitter.emit('start', 'started')
控制臺將會打印 started
Vue中的自定義事件
給組件添加自定義事件，下面示例代碼中的 enlarge-text 事件就是我們自己定義的事件，onEnlargeText 則是事件觸發(fā)時所要執(zhí)行的回調(diào)函數(shù)，這里的 onEnlargeText 是一個函數(shù)指針，指向 methods 中所定義的 onEnlargeText 函數(shù)。既然是回調(diào)函數(shù)，所以可能會有參數(shù)傳給它，那么自定義事件的回調(diào)函數(shù)中的參數(shù)是誰傳遞給它的，具體含義又是什么呢？
<blog-post
...
@enlarge-text="onEnlargeText">
</blog-post>
methods: {
onEnlargeText: function (enlargeAmount) {
this.postFontSize += enlargeAmount
}
}
子組件事件處理中可以通過內(nèi)建的 「$emit」 方法傳入父組件自定義事件名來觸發(fā)這個自定義事件，并且通過 「$emit」 的第二個參數(shù)將需要傳遞給父組件的數(shù)據(jù)拋出，這樣，自定義事件的回調(diào)函數(shù)中的參數(shù)來源也就明白了，就是 「$emit」 方法的第二個參數(shù)，這里可以直接拋出一個更加靈活的對象。
<button @click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
到這里我們可以看到，Vue 中的自定義事件和 Node.js 中的事件觸發(fā)器的理念非常相似，Vue 中自定義事件的注冊是在父組件中完成的，而觸發(fā)是在子組件中完成的。至此，就完成了對 Vue 自定義事件的解釋。
參考資源
總結(jié)
到此這篇關(guān)于從Node.js事件觸發(fā)器到Vue自定義事件的文章就介紹到這了,更多相關(guān)Node.js事件觸發(fā)器到Vue自定義事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Node.js Stream ondata觸發(fā)時機(jī)與順序的探索
今天小編就為大家分享一篇關(guān)于Node.js Stream ondata觸發(fā)時機(jī)與順序的探索，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-03-03
Nodejs在局域網(wǎng)配置https訪問的實(shí)現(xiàn)方法
做一個局域網(wǎng)WebRTC視頻聊天系統(tǒng)，需要用到HTTPS。因此，配置Node.js使其支持HTTPS訪問。這篇文章主要介紹了Nodejs在局域網(wǎng)配置https訪問的實(shí)現(xiàn)方法,需要的朋友可以參考下2020-10-10
Restify中接入Socket.io報Error:Can’t set headers的錯誤解決
這篇文章主要給大家介紹了在Restify中接入Socket.io報Error:Can’t set headers的錯誤解決方法，文中介紹的非常詳細(xì)，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要介紹了如何使用nexus3搭建npm私有倉庫,包括安裝并運(yùn)行私服的相關(guān)知識,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要介紹了package.json配置文件構(gòu)成以及相關(guān)知識點(diǎn)內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。2019-08-08
Node學(xué)習(xí)筆記：Node.js安裝及環(huán)境配置 史詩級詳細(xì)版【含測試與鏡像說明】
這篇文章主要介紹了Node學(xué)習(xí)筆記之Node.js安裝及環(huán)境配置方法,詳細(xì)分析了node.js的基本安裝、配置、環(huán)境變量設(shè)置、以及環(huán)境測試與鏡像使用說明,需要的朋友可以參考下2023-05-05
基于Node-red的在線評語系統(tǒng)(可視化編程,公網(wǎng)訪問)
Node-Red是IBM公司開發(fā)的一個可視化的編程工具，在網(wǎng)頁內(nèi)編程，主要是拖拽控件，代碼量很小,這篇文章主要介紹了基于Node-red的在線評語系統(tǒng)(可視化編程,公網(wǎng)訪問),需要的朋友可以參考下2022-01-01
這篇文章主要介紹了nodejs微信開發(fā)之接入指南，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了nodejs中實(shí)現(xiàn)修改用戶路由功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了監(jiān)控Nodejs的性能實(shí)例代碼,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07