Vue中事件绑定的原理

最新推荐文章于 2024-04-19 18:32:11 发布

Janicelily

最新推荐文章于 2024-04-19 18:32:11 发布

阅读量1.3k

点赞数 2

分类专栏： js vue 文章标签： javascript

本文链接：https://blog.csdn.net/beth__hui/article/details/114089801

版权

本文详细探讨了Vue中事件绑定的原理，包括原生DOM事件的绑定通过`addEventListener`实现，组件内事件利用Vue的`$on`方法，以及`$on`如何采用发布订阅者模式来管理和触发事件。重点解析了`$on`的内部实现，阐述了事件中心`_events`的作用和事件订阅与触发的过程。

摘要由CSDN通过智能技术生成

之前我搜这个原理的时候，好多文章，都只写了俩句话：

原生事件绑定是通过addEventListener绑定给真实元素的。
组件事件绑定是通过Vue自定义的key$on实现的。

那具体是怎么实现的呢，没有说？
就现在具体看一下。

// 原生事件绑定
<div @click="fn()"></div>

// 组件绑定
<my-component @click.native="fn" @click="fn1"></my- component>

原理：
事件的编译：

let compiler = require('vue-template-compiler'); //vue-loader
let r1 = compiler.compile('<div @click="fn()"></div>'); 
let r2 = compiler.compile('<my-component @click.native="fn" @click="fn1"></my- component>'); console.log(r1); 
// {on:{click}} console.log(r2); 
// {nativeOn:{click},on:{click}}