前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【Vue原理】Event - 白话版

【Vue原理】Event - 白话版

作者头像
神仙朱
修改2019-08-03 13:53:28
4260
修改2019-08-03 13:53:28
举报
文章被收录于专栏:Vue源码 & 前端进阶体系

写文章不容易,点个赞呗兄弟 专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧

研究基于 Vue版本 【2.5.17】

如果你觉得排版难看,请点击 下面链接 或者 拉到 下面关注公众号也可以吧

【Vue原理】Event - 白话版

Vue 事件是我最感兴趣的东西之一,一直想研究玩玩

特别是组件自定义事件,很想知道,给子组件绑定自定义事件,子组件是怎么触发的 巴拉巴拉的

开始正文了

在 Vue 中,事件大概分为 4 种

1、自定义事件

2、DOM 事件

3、组件DOM 事件

4、组件自定义事件

然后再细分,就只有两种

1、自定义事件

2、DOM 事件

下面就来粗略说一下事件


自定义事件

自定义事件 是使用观察者模式建立起来的一种事件机制

分为 个人使用 和 组件使用

自定义事件主要由下面两部分构成

1、有事件存储器

2、绑定事件,触发事件,解绑事件三个函数

在 Vue 中,每个实例都会添加一个属性_events,用来存放本实例上注册的自定义事件

公众号
公众号

_events 就是 事件存储器,是一个对象

属性名是 事件名,属性值是事件回调

个人调用自定义事件

我也经常在项目中使用到 自定义事件,像下面这样

公众号
公众号

没错,$on 就是注册事件,$emit 是 触发事件,$off 就是 解绑事件

在哪个实例上注册的事件,事件就属于哪个实例,正常情况下,你是不可能能触发别的实例上的事件的

而给组件绑定自定义事件 是怎么样的呢?

公众号
公众号

结果也是一样的,前面的解析处理可以不管,最后同样是使用内置的 $on 方法去注册事件

而这个事件依然是属于子组件的,存放在 子组件的 _events 中

公众号
公众号

所以你可以在子组件中,使用 this.$emit 触发这个事件

DOM 事件

DOM 事件,最后就是直接给 DOM 绑定事件

使用 addEventListeners 绑定事件,没有做任何兼容处理,灰常简单

绑定事件,是在DOM 创建之后,插入页面之前

1、普通标签绑定事件

公众号
公众号

很简单,普通 addEventListener 绑定DOM事件就完事了

事件会被保存在这个节点解析成的 vnode 中,就是 vm._vnode

公众号
公众号

2、组件绑定DOM 事件

如果要给组件绑定原生DOM 事件,需要加上 native 这个修饰器

公众号
公众号

组件绑定的DOM 事件,在父实例解析完毕开始挂载时,遇到子元素是组件,然后去解析组件内部并生成DOM之后才 addEventListener 绑定

绑定的原生事件,会被存放在组件的外壳节点上 vm.$vnode

公众号
公众号

还有,你可能会想,如果这样绑定DOM事件会怎么样?

公众号
公众号

问得好,这样并不会绑定DOM事件,而是给组件绑定自定义事件,最后是会存在 子组件的 _events 中的,并不会绑定DOM事件

公众号
公众号

然后可以在子组件中用 this.$emit("click") 去触发这个父组件绑定的这个click

公众号
公众号
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-05-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 神仙朱 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 自定义事件
    • 个人调用自定义事件
    • DOM 事件
      • 1、普通标签绑定事件
        • 2、组件绑定DOM 事件
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档