从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自定义事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
npm安装依赖报错ERESOLVE unable to resolve dependency tree的解决方
当我们拿到一个前端项目的时候,想要把它运行起来,首先是要给它安装依赖,下面这篇文章主要给大家介绍了关于npm安装依赖报错ERESOLVE unable to resolve dependency tree的解决方法,需要的朋友可以参考下2023-04-04
在本篇文章中给大家详细讲述了node字体压缩插件font-spider的用法的相关知识点内容，有需要的朋友参考下。2018-09-09
这篇文章主要介绍了node.js中的fs.lchown方法使用说明,本文介绍了fs.lchown的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下2014-12-12
node.js中的querystring.parse方法使用说明
这篇文章主要介绍了node.js中的querystring.parse方法使用说明,本文介绍了querystring.parse的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下2014-12-12
在微信这个聊天工具里的小程序上实现聊天功能，总觉得很诧异，今天小编给大家带来了使用node.js实现微信小程序实时聊天功能，感兴趣的朋友一起看看吧2018-08-08
这篇文章主要介绍了node.js中的fs.futimes方法使用说明,本文介绍了fs.futimes方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下2014-12-12
npm是一个node包管理和分发工具，已经成为了非官方的发布node模块（包）的标准。接下来通过本文给大家介绍nodejs中 npm常用命令2016-07-07
assert 模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。下面这篇文章主要给大家介绍了关于node.js学习之断言assert的相关资料，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2017-09-09
在现代 Web 开发中,与数据库的交互是不可避免的一部分,Node.js提供了许多库和模块,使得连接和操作 MySQL 数据库变得相对简单,本文将介绍如何使用Node.js连接MySQL数据库,并进行一些基本的操作,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-11-11
npm安装报错npm ERR! Error: EPERM: operation&
这篇文章主要为大家介绍了npm安装报错npm ERR! Error: EPERM: operation not permitted解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
最新评论