從Node.js事件觸發(fā)器到Vue自定義事件的深入講解
Node.js中的事件觸發(fā)器所引發(fā)的思考
今天在看 Node.js 文檔的時候講到事件觸發(fā)器，其中的 emit 方法讓我想到了 Vue 中的自定義事件，借此我對 Vue 又有了新的理解，所以將我的理解記錄下來，留作學習筆記。
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)文章
npm安裝依賴報錯ERESOLVE?unable?to?resolve?dependency?tree的解決方
當我們拿到一個前端項目的時候,想要把它運行起來,首先是要給它安裝依賴,下面這篇文章主要給大家介紹了關(guān)于npm安裝依賴報錯ERESOLVE?unable?to?resolve?dependency?tree的解決方法,需要的朋友可以參考下2023-04-04
在本篇文章中給大家詳細講述了node字體壓縮插件font-spider的用法的相關(guān)知識點內(nèi)容，有需要的朋友參考下。2018-09-09
這篇文章主要介紹了node.js中的fs.lchown方法使用說明,本文介紹了fs.lchown的方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12
node.js中的querystring.parse方法使用說明
這篇文章主要介紹了node.js中的querystring.parse方法使用說明,本文介紹了querystring.parse的方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12
使用node.js實現(xiàn)微信小程序?qū)崟r聊天功能
在微信這個聊天工具里的小程序上實現(xiàn)聊天功能，總覺得很詫異，今天小編給大家?guī)砹耸褂胣ode.js實現(xiàn)微信小程序?qū)崟r聊天功能，感興趣的朋友一起看看吧2018-08-08
這篇文章主要介紹了node.js中的fs.futimes方法使用說明,本文介紹了fs.futimes方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12
npm是一個node包管理和分發(fā)工具，已經(jīng)成為了非官方的發(fā)布node模塊（包）的標準。接下來通過本文給大家介紹nodejs中 npm常用命令2016-07-07
assert 模塊主要用于編寫程序的單元測試時使用，通過斷言可以提早發(fā)現(xiàn)和排查出錯誤。下面這篇文章主要給大家介紹了關(guān)于node.js學習之斷言assert的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2017-09-09
Node.js連接MySQL數(shù)據(jù)庫的操作步驟
在現(xiàn)代 Web 開發(fā)中,與數(shù)據(jù)庫的交互是不可避免的一部分,Node.js提供了許多庫和模塊,使得連接和操作 MySQL 數(shù)據(jù)庫變得相對簡單,本文將介紹如何使用Node.js連接MySQL數(shù)據(jù)庫,并進行一些基本的操作,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-11-11
npm安裝報錯npm ERR! Error: EPERM: operation&
這篇文章主要為大家介紹了npm安裝報錯npm ERR! Error: EPERM: operation not permitted解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07