从Node.js事件触发器到Vue自定义事件的深入讲解
Node.js中的事件触发器所引发的思考
今天在看 Node.js 文档的时候讲到事件触发器，其中的 emit 方法让我想到了 Vue 中的自定义事件，借此我对 Vue 又有了新的理解，所以将我的理解记录下来，留作学习笔记。
Node.js中的事件触发器
Node.js 为我们提供了一个事件模块：EventEmitter，我们可以用它来处理事件
const EventEmitter = require('events')
const eventEmitter = new EventEmitter()
eventEmitter 对象上有两个方法：on 和 emit
- on 用于添加自定义事件，注册回调函数
- emit 用于触发事件，并将参数传递给回调函数
eventEmitter.on('start', (e) => {
console.log(e)
})
eventEmitter.emit('start', 'started')
控制台将会打印 started
Vue中的自定义事件
给组件添加自定义事件，下面示例代码中的 enlarge-text 事件就是我们自己定义的事件，onEnlargeText 则是事件触发时所要执行的回调函数，这里的 onEnlargeText 是一个函数指针，指向 methods 中所定义的 onEnlargeText 函数。既然是回调函数，所以可能会有参数传给它，那么自定义事件的回调函数中的参数是谁传递给它的，具体含义又是什么呢？
<blog-post
...
@enlarge-text="onEnlargeText">
</blog-post>
methods: {
onEnlargeText: function (enlargeAmount) {
this.postFontSize += enlargeAmount
}
}
子组件事件处理中可以通过内建的 「$emit」 方法传入父组件自定义事件名来触发这个自定义事件，并且通过 「$emit」 的第二个参数将需要传递给父组件的数据抛出，这样，自定义事件的回调函数中的参数来源也就明白了，就是 「$emit」 方法的第二个参数，这里可以直接抛出一个更加灵活的对象。
<button @click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
到这里我们可以看到，Vue 中的自定义事件和 Node.js 中的事件触发器的理念非常相似，Vue 中自定义事件的注册是在父组件中完成的，而触发是在子组件中完成的。至此，就完成了对 Vue 自定义事件的解释。
参考资源
总结
到此这篇关于从Node.js事件触发器到Vue自定义事件的文章就介绍到这了,更多相关Node.js事件触发器到Vue自定义事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Node.js Stream ondata触发时机与顺序的探索
今天小编就为大家分享一篇关于Node.js Stream ondata触发时机与顺序的探索，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-03-03
做一个局域网WebRTC视频聊天系统，需要用到HTTPS。因此，配置Node.js使其支持HTTPS访问。这篇文章主要介绍了Nodejs在局域网配置https访问的实现方法,需要的朋友可以参考下2020-10-10
Restify中接入Socket.io报Error:Can’t set headers的错误解决
这篇文章主要给大家介绍了在Restify中接入Socket.io报Error:Can’t set headers的错误解决方法，文中介绍的非常详细，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-03-03
这篇文章主要介绍了如何使用nexus3搭建npm私有仓库,包括安装并运行私服的相关知识,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要介绍了package.json配置文件构成以及相关知识点内容，有兴趣的朋友们可以学习下。2019-08-08
Node学习笔记：Node.js安装及环境配置 史诗级详细版【含测试与镜像说明】
这篇文章主要介绍了Node学习笔记之Node.js安装及环境配置方法,详细分析了node.js的基本安装、配置、环境变量设置、以及环境测试与镜像使用说明,需要的朋友可以参考下2023-05-05
Node-Red是IBM公司开发的一个可视化的编程工具，在网页内编程，主要是拖拽控件，代码量很小,这篇文章主要介绍了基于Node-red的在线评语系统(可视化编程,公网访问),需要的朋友可以参考下2022-01-01
这篇文章主要介绍了nodejs微信开发之接入指南，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了nodejs中实现修改用户路由功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了监控Nodejs的性能实例代码,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-07-07
最新评论