快捷導(dǎo)航

從Node.js事件觸發(fā)器到Vue自定義事件的深入講解

更新時間：2020年06月26日 09:50:28 作者：Pinocchioooo

這篇文章主要給大家介紹了關(guān)于從Node.js事件觸發(fā)器到Vue自定義事件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面來一起學(xué)習學(xué)習吧

Node.js中的事件觸發(fā)器所引發(fā)的思考

今天在看 Node.js 文檔的時候講到事件觸發(fā)器，其中的 emit 方法讓我想到了 Vue 中的自定義事件，借此我對 Vue 又有了新的理解，所以將我的理解記錄下來，留作學(xué)習筆記。

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 自定義事件的解釋。

參考資源

nodejs.cn/learn/the-n…

cn.vuejs.org/v2/guide/co…

總結(jié)

到此這篇關(guān)于從Node.js事件觸發(fā)器到Vue自定義事件的文章就介紹到這了,更多相關(guān)Node.js事件觸發(fā)器到Vue自定義事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

從Node.js事件觸發(fā)器到Vue自定義事件的深入講解

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具