从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 Archive Network 集合
May 12 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 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抽象工厂模式(Elgg)
2010/03/21 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
laravel自定义分页效果
2017/07/23 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
公司晚会主持词
2014/03/22 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
撤诉申请怎么写
2015/05/19 职场文书