從Node.js事件觸發(fā)器到Vue自定義事件的深入講解
Node.js中的事件觸發(fā)器所引發(fā)的思考
今天在看 Node.js 文檔的時(shí)候講到事件觸發(fā)器，其中的 emit 方法讓我想到了 Vue 中的自定義事件，借此我對(duì) Vue 又有了新的理解，所以將我的理解記錄下來(lái)，留作學(xué)習(xí)筆記。
Node.js中的事件觸發(fā)器
Node.js 為我們提供了一個(gè)事件模塊：EventEmitter，我們可以用它來(lái)處理事件
const EventEmitter = require('events')
const eventEmitter = new EventEmitter()
eventEmitter 對(duì)象上有兩個(gè)方法：on 和 emit
- on 用于添加自定義事件，注冊(cè)回調(diào)函數(shù)
- emit 用于觸發(fā)事件，并將參數(shù)傳遞給回調(diào)函數(shù)
eventEmitter.on('start', (e) => {
console.log(e)
})
eventEmitter.emit('start', 'started')
控制臺(tái)將會(huì)打印 started
Vue中的自定義事件
給組件添加自定義事件，下面示例代碼中的 enlarge-text 事件就是我們自己定義的事件，onEnlargeText 則是事件觸發(fā)時(shí)所要執(zhí)行的回調(diào)函數(shù)，這里的 onEnlargeText 是一個(gè)函數(shù)指針，指向 methods 中所定義的 onEnlargeText 函數(shù)。既然是回調(diào)函數(shù)，所以可能會(huì)有參數(shù)傳給它，那么自定義事件的回調(diào)函數(shù)中的參數(shù)是誰(shuí)傳遞給它的，具體含義又是什么呢？
<blog-post
...
@enlarge-text="onEnlargeText">
</blog-post>
methods: {
onEnlargeText: function (enlargeAmount) {
this.postFontSize += enlargeAmount
}
}
子組件事件處理中可以通過(guò)內(nèi)建的 「$emit」 方法傳入父組件自定義事件名來(lái)觸發(fā)這個(gè)自定義事件，并且通過(guò) 「$emit」 的第二個(gè)參數(shù)將需要傳遞給父組件的數(shù)據(jù)拋出，這樣，自定義事件的回調(diào)函數(shù)中的參數(shù)來(lái)源也就明白了，就是 「$emit」 方法的第二個(gè)參數(shù)，這里可以直接拋出一個(gè)更加靈活的對(duì)象。
<button @click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
到這里我們可以看到，Vue 中的自定義事件和 Node.js 中的事件觸發(fā)器的理念非常相似，Vue 中自定義事件的注冊(cè)是在父組件中完成的，而觸發(fā)是在子組件中完成的。至此，就完成了對(duì) Vue 自定義事件的解釋。
參考資源
總結(jié)
到此這篇關(guān)于從Node.js事件觸發(fā)器到Vue自定義事件的文章就介紹到這了,更多相關(guān)Node.js事件觸發(fā)器到Vue自定義事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
npm安裝依賴報(bào)錯(cuò)ERESOLVE?unable?to?resolve?dependency?tree的解決方
當(dāng)我們拿到一個(gè)前端項(xiàng)目的時(shí)候,想要把它運(yùn)行起來(lái),首先是要給它安裝依賴,下面這篇文章主要給大家介紹了關(guān)于npm安裝依賴報(bào)錯(cuò)ERESOLVE?unable?to?resolve?dependency?tree的解決方法,需要的朋友可以參考下2023-04-04
在本篇文章中給大家詳細(xì)講述了node字體壓縮插件font-spider的用法的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友參考下。2018-09-09
node.js中的fs.lchown方法使用說(shuō)明
這篇文章主要介紹了node.js中的fs.lchown方法使用說(shuō)明,本文介紹了fs.lchown的方法說(shuō)明、語(yǔ)法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
node.js中的querystring.parse方法使用說(shuō)明
這篇文章主要介紹了node.js中的querystring.parse方法使用說(shuō)明,本文介紹了querystring.parse的方法說(shuō)明、語(yǔ)法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
使用node.js實(shí)現(xiàn)微信小程序?qū)崟r(shí)聊天功能
在微信這個(gè)聊天工具里的小程序上實(shí)現(xiàn)聊天功能，總覺(jué)得很詫異，今天小編給大家?guī)?lái)了使用node.js實(shí)現(xiàn)微信小程序?qū)崟r(shí)聊天功能，感興趣的朋友一起看看吧2018-08-08
node.js中的fs.futimes方法使用說(shuō)明
這篇文章主要介紹了node.js中的fs.futimes方法使用說(shuō)明,本文介紹了fs.futimes方法說(shuō)明、語(yǔ)法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
npm是一個(gè)node包管理和分發(fā)工具，已經(jīng)成為了非官方的發(fā)布node模塊（包）的標(biāo)準(zhǔn)。接下來(lái)通過(guò)本文給大家介紹nodejs中 npm常用命令2016-07-07
node.js學(xué)習(xí)之?dāng)嘌詀ssert的使用示例
assert 模塊主要用于編寫(xiě)程序的單元測(cè)試時(shí)使用，通過(guò)斷言可以提早發(fā)現(xiàn)和排查出錯(cuò)誤。下面這篇文章主要給大家介紹了關(guān)于node.js學(xué)習(xí)之?dāng)嘌詀ssert的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09
Node.js連接MySQL數(shù)據(jù)庫(kù)的操作步驟
在現(xiàn)代 Web 開(kāi)發(fā)中,與數(shù)據(jù)庫(kù)的交互是不可避免的一部分,Node.js提供了許多庫(kù)和模塊,使得連接和操作 MySQL 數(shù)據(jù)庫(kù)變得相對(duì)簡(jiǎn)單,本文將介紹如何使用Node.js連接MySQL數(shù)據(jù)庫(kù),并進(jìn)行一些基本的操作,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
npm安裝報(bào)錯(cuò)npm ERR! Error: EPERM: operation&
這篇文章主要為大家介紹了npm安裝報(bào)錯(cuò)npm ERR! Error: EPERM: operation not permitted解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07