从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实现图片轮播效果代码
Sep 03 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
vue router 动态路由清除方式
May 25 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
php xml实例 留言本
2009/03/20 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
HTML颜色选择器实现代码
2010/11/23 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python编程中的异常处理教程
2015/08/21 Python
python中map()函数的使用方法示例
2017/09/29 Python
分享6个隐藏的python功能
2017/12/07 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
Python with语句用法原理详解
2020/07/03 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
运动会广播稿80字
2014/01/23 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js
javascript的var与let,const之间的区别详解
2022/02/18 Javascript
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技