【Vue原理】Event - 白话版

kumfo 发布于2019-08-23 18:35 / 1777人阅读

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理白话版事件是我最感兴趣的东西之

写文章不容易，点个赞呗兄弟
专注 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

云服务器 GPU云服务器 vue安卓版白话白话云计算白话区块链

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105488.html

【Vue原理】Event - 源码版之绑定组件自定义事件

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之绑定组件自定义事件组件写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于...

amuqiao 2019-08-23 18:36 评论0 收藏0
【Vue原理】VModel - 白话版

摘要：执行的时候，会绑定上下文对象为组件实例于是中的就能取到组件实例本身，的代码块顶层作用域就绑定为了组件实例于是内部变量的访问，就会首先访问到组件实例上。其中的获取，就会先从组件实例上获取，相当于。写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得...

keke 2019-08-23 18:25 评论0 收藏0
【Vue原理】Event - 源码版之绑定标签DOM事件

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之绑定标签事件这里的绑定写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于...

phoenixsky 2019-08-23 18:35 评论0 收藏0
【Vue原理】NextTick - 白话版

摘要：通常会做很多判断来选择存在的类型，比如判断等是否存在，而选择他为微任务类型但是可能宏微任务最后都是，因为他是保守兼容处理。写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧【V...

zeyu 2019-08-26 18:36 评论0 收藏0
【Vue原理】Event - 源码版之自定义事件

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之自定义事件的自定义事件写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于...

yunhao 2019-08-23 18:36 评论0 收藏0