从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 5 新增 Array 方法实现介绍
Feb 06 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
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
DC动漫人物排行
2020/03/03 欧美动漫
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
PHP实现计算器小功能
2020/08/28 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
js控制table合并具体实现
2014/02/20 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
更新修改后的Python模块方法
2019/03/03 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
python支持多线程的爬虫实例
2019/12/21 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
《槐乡五月》教学反思
2014/04/25 职场文书
县级文明单位申报材料
2014/05/23 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
签订劳动合同通知书
2015/04/16 职场文书
基层工作经历证明
2015/06/19 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python