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

参考资源

nodejs.cn/learn/the-n…

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

总结

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

赞 (0)

相关推荐

  • vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】

    本文实例讲述了vue使用自定义事件的表单输入组件用法.分享给大家供大家参考,具体如下: 自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定. v-model的实现原理 : <input v-model="something"> 这不过是以下示例的语法糖: <input v-bind:value="something" v-on:input="something = $event.target.value&

  • Vue自定义事件(详解)

    前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Events interface),即 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 [注意]Vue 的事件系统分离自浏览器的EventTarget API.尽管它们的运行类似,但是 $on 和 $emit 不是addEventListener 和 disp

  • 浅谈Vue.js 组件中的v-on绑定自定义事件理解

    浅谈Vue.js 组件中的v-on绑定自定义事件理解

    每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 Vue的事件系统分离自浏览器的EventTarget API.尽管它们的运行类似,但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名. 另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件. 下面是一个文档上面的例子: 2017年4月11日更新 <d

  • vue子组件使用自定义事件向父组件传递数据

    vue子组件使用自定义事件向父组件传递数据

    使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit('自定义的事件名称',传递给父组件的数据) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></scr

  • VUE DOM加载后执行自定义事件的方法

    最近想用vue做一个小东西,谁知道一开始就遇到了一个棘手的问题: 首先我想在页面加载前通过ajax请求页面展示所需要的信息,于是我在created钩子函数里面请求了我想要的数据 created:function(){ var url="/indexitem"; var _self=this; $.get(url,function(data){ _self.items=data; }); $.get('/banner',function(data){ _self.banners=data

  • Vue.js组件通信之自定义事件详解

    Vue.js组件通信之自定义事件详解

    组件通信 从父组件向子组件通信,通过props传递数据就可以了,但Vue组件通信的场景不止有这一种,归纳起来,组件之间的通信可以用下图来表示: 自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件.子组件用**$ emit()来触发事件**,父组件用**$ on()**来监听子组件的事件. 父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的事件. <!DOCTYPE html> <html lang="en"> <head>

  • Vue组件之自定义事件的功能图解

    Vue组件之自定义事件的功能图解

    使用v-on绑定自定义事件 (一)基于webpack的项目初始化 在使用之前,我们先使用npm构建一个vue应用,使该项目能很好地和webpack模块打包器配合使用,命令如下 进入自定义空文件夹vuepro下,myapp项目初始化需利用webpack打包生成一个标准目录的项目文件夹 vue init webpack myapp 安装过程会出现以下几个让我们操作的地方,前几个直接按回车,后面输入n即可,如下图 安装完成后,myapp文件夹下会自动生成一些文件和文件夹,表示我们项目初始化完成,而我们

  • node.js中事件触发器events的使用方法实例分析

    本文实例讲述了node.js中事件触发器events的使用方法.分享给大家供大家参考,具体如下: node.js是基于事件驱动的,通过events,我们可以方便的创建事件,并通过触发事件来调用我们自定义的监听函数. 所有能触发事件的对象都应该是 EventEmitter 类的实例,一般我们自定义一个类继承于 EventEmitter 类. 通过on()方法我们可以绑定事件与监听函数: const Events = require('events'); //自定义一个类,继承于EventEmitt

  • Vue.js自定义事件的表单输入组件方法

    Vue.js使用自定义事件的表单输入组件 自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定.要牢记: <input v-model="something"> 这不过是以下示例的语法糖: <input v-bind:value="something" v-on:input="something = $event.target.value"> 所以在组件中使用时,它相当于下面的简写: <

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

    Node.js中的事件触发器所引发的思考 今天在看 Node.js 文档的时候讲到事件触发器,其中的 emit 方法让我想到了 Vue 中的自定义事件,借此我对 Vue 又有了新的理解,所以将我的理解记录下来,留作学习笔记. Node.js中的事件触发器 Node.js 为我们提供了一个事件模块:EventEmitter,我们可以用它来处理事件 const EventEmitter = require('events') const eventEmitter = new EventEmitter

  • node.js使用stream模块实现自定义流示例

    本文实例讲述了node.js使用stream模块实现自定义流.分享给大家供大家参考,具体如下: 有些时候我们需要自定义一些流,来操作特殊对象,node.js中为我们提供了一些基本流类. 我们新创建的流类需要继承四个基本流类之一(stream.Writeable,stream.Readable,stream.Duplex,stream.Transform),并确保调用了父类构造函数. 一.实现自定义的可读流 实现可读流需继承 stream.Readable,并实现 readable._read()

  • Node.js里面的内置模块和自定义模块的实现

    Node.js里面的内置模块和自定义模块的实现

    一.Commonjs Commonjs是nodejs中的自定义模块 Commonjs规范的提出,弥补javascript没有标准的缺陷,提供一个类似后端语言的标准库,也就是说commonjs是模块化的标准,nodejs就是commonjs模块化的实现.在nodejs中除了http,url,fs等等都是nodejs的内置模块,可以直接使用. commonjs中自定义模块的实现: 在nodejs中将公共的功能抽离为单独的js文件作为模块,在外部是没有办法访问的(类似后端的私有的属性和方法);要想使用

  • 基于node.js的fs核心模块读写文件操作(实例讲解)

    node.js 里fs模块 常用的功能 实现文件的读写 目录的操作 - 同步和异步共存 ,有异步不用同步 - fs.readFile 都不能读取比运行内存大的文件,如果文件偏大也不会使用readFile方法 - 文件大分流读取,stream - 引入fs模块 - let fs=require('fs') 同步读取文件 -fs.readFileSync('路径',utf8); let result=fs.readFileSync('./1.txt','utf8'); 异步读取文件,用参数err捕获

  • 在C#使用字典存储事件示例及实现自定义事件访问器

    使用字典存储事件实例 accessor-declarations 的一种用法是公开很多事件但不为每个事件分配字段,而是使用字典来存储这些事件实例.这只在具有很多事件但您预计大多数事件都不会实现时才有用. public delegate void EventHandler1(int i); public delegate void EventHandler2(string s); public class PropertyEventsSample { private System.Collecti

  • js实现屏蔽默认快捷键调用自定义事件示例

    具体如何屏蔽更多的快捷键可以自行google搜索. 这里要说的是如何屏蔽后去执行自定义的事件. 这里为了方便使用的Kibo做例子,使用google搜索出来的结果一般都是javascript原生实现,很简单的,这里不做介绍. 这里是实现了在一个textarea中enter进行保存的例子,屏蔽掉了原来的回车事件. 代码如下: 复制代码 代码如下: //键盘监听 var areaKey = new Kibo($("#aac010")[0]); areaKey.down('enter',doS

  • 实例分析JS与Node.js中的事件循环

    实例分析JS与Node.js中的事件循环

    这两天跟同事同事讨论遇到的一个问题,js中的event loop,引出了chrome与node中运行具有setTimeout和Promise的程序时候执行结果不一样的问题,从而引出了Nodejs的event loop机制,记录一下,感觉还是蛮有收获的 console.log(1) setTimeout(function() { new Promise(function(resolve, reject) { console.log(2) resolve() }) .then(() => { con

  • 深入浅析Node.js 事件循环、定时器和process.nextTick()

    什么是事件循环 尽管JavaScript是单线程的,但通过尽可能将操作放到系统内核执行,事件循环允许Node.js执行非阻塞I/O操作. 由于现代大多数内核都是多线程的,因此它们可以处理在后台执行的多个操作. 当其中一个操作完成时,内核会告诉Node.js,以便可以将相应的回调添加到 轮询队列 中以最终执行. 我们将在本主题后面进一步详细解释. 事件循环解释 当Node.js启动时,它初始化事件循环,处理提供的输入脚本(或放入 REPL ,本文档未涉及),这可能会进行异步API调用,调度计时器或

随机推荐