从Node.js事件触发器到Vue自定义事件的深入讲解


Posted in Javascript onJune 26, 2020

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 自定义事件的解释。

参考资源

nodejs.cn/learn/the-n…

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

总结

到此这篇关于从Node.js事件触发器到Vue自定义事件的文章就介绍到这了,更多相关Node.js事件触发器到Vue自定义事件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
jQuery timers计时器简单应用说明
Oct 28 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
React路由管理之React Router总结
May 10 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
vue+Element-ui实现登录注册表单
Nov 17 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 #Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 #Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 #Javascript
viewer.js实现图片预览功能
Jun 24 #Javascript
Javascript实现鼠标移入方向感知
Jun 24 #Javascript
javascript实现前端input密码输入强度验证
Jun 24 #Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 #Javascript
You might like
php ios推送(代码)
2013/07/01 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
chrome调试javascript详解
2015/10/21 Javascript
js获取url传值的方法
2015/12/18 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
python join方法使用详解
2019/07/30 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
python使用建议与技巧分享(一)
2020/08/17 Python
python压包的概念及实例详解
2021/02/17 Python
python元组拆包实现方法
2021/02/28 Python
春节晚会主持词
2014/03/24 职场文书
小学清明节活动总结
2014/07/04 职场文书
检讨书模板大全
2015/05/07 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python