Vue中$on和$emit的实现原理分析

目录
  • Vue中发布订阅模式
  • $emit和$on用法深挖
    • 首先剖析一下$on的原理实现
    • 有一点要记住先定义的先触发
    • 分析$emit
    • 先打个断点

Vue中发布订阅模式

在Vue中采用了发布订阅模式，典型的兄弟组件间的通信$on和$emit

发布订阅模式：（订阅者、发布者、信号中心）

一个发布者$emit发布一个事件到信号中心 eventBus ，订阅者们 $on 通过信号中心收到该事件，进行处理

在这里模拟一个自定义事件 $on和$emit事件

class EventBus{
	constructor(){
		// 1.处理事件对应的处理函数
		this.sub = {}
	}
	$on(event,fn){
		if(!this.sub[event]){
			// 2.判断sub是否已经存在该事件了，没有的话就赋值一个数组，用来存储触发函数
			this.sub[event] = []
		}
		// 3.将函数push到对应的事件中
		this.sub[event].push(fn)
	}
	$emit(event){
		if(this.sub[event]){
			this.sub[event].forEach(fn=>{
				fn() //4.执行对应事件中的处理函数
			})
		}
	}
}
// 信号中心
const vm = new EventBus()
// 订阅事件
vm.$on('click',()=>{console.log('触发了click事件')})
vm.$on('change',()=>{console.log('触发了change事件')})
// 发布订阅
vm.$emit('click')
vm.$emit('change')

$emit和$on用法深挖

俗称的 e m i t 和 emit和 emit和on就是消费和定义，咱们在代码中讲解

<body>
    <div id="app">
<button @click="add">测试</button>

            </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message:'ok'
            },
            created() {
                this.$on('my_event',this.datalist)
            },
            methods: {
                datalist(e){
               console.log(this.message,e);

                },
                add(){
                    this.$emit('my_event','hello wu')
                }
            }
        });
    </script>
</body>

首先剖析一下$on的原理实现

先在create加个断点

我们会发现他会跳到on的源码中

我们传入的参数是两个，第一个是我们事件的名称，第二个是我们事件处理方法对应的event和fn

  • 首先他把this传给vm
  • 然后判断event是不是一个数组，如果是个数组他就会以循环的方式进行赋值，继续执行on的迭代方法，如果不是数组进入else的逻辑判断去找他是不是包含了event，如果不包含他会自己创建个event设置成空数组，把新建的处理函数push进去，这说明我们在定义个事件的时候，是可以同时为一个事件定义多个执行方法，最后找到定义的方法并返回
  • 定义第二种方法看代码
 var vm = new Vue({
            el: '#app',
            data: {
                message:'ok'
            },
            created() {
                this.$on('my_event',this.datalist)
                this.$on('my_event',this.datalist2)
            },
            methods: {
                datalist(e){
               console.log(this.message,e);

                },
                datalist2(e){
               console.log('我是第二种方法',e);

                },
                add(){
                    this.$emit('my_event','hello wu')
                }
            }
        });

说明定义多个执行方法也是没问题的

有一点要记住先定义的先触发

还有一个点他是可以是个数组，在不同的事件绑定同一个处理方法，如下代码

 var vm = new Vue({
            el: '#app',
            data: {
                message:'ok'
            },
            created() {
                this.$on(['my_event','my_event2'],this.datalist)
                console.log(this._events);

                // this.$on('my_event',this.datalist2)
            },
            methods: {
                datalist(e){
               console.log(this.message,e);

                },
                datalist2(e){
               console.log('我是第二种方法',e);

                },
                add(){
                    this.$emit('my_event2','hello wu')
                }
            }
        });

换成第二个数组他还是可以实现

分析$emit

先打个断点

1.emit的源码

2.关键的一步：先通过名称改成小写后然后直接从我们vue实例下划线events这个对象当中拿出事件对应的方法，如果找不到什么都不做，直接返回回来，找的话，第一步先判断cbs的长度打不打与1，因为他有可能是个数组，多个处理函数如果大于一就变成了一个数组，如果等于一的话直接返回cbs.

第二步他对arguments做了处理把后面的参数变成数组，第一个不要了 ，因为事件名称他用完了，紧接着他对cbs做了个循环，

这个函数是捕获处理异常，执行try catch，所以说如果执行emit出了错误他不会崩溃，会抛出错误，这个地方做的还不赖 最后把res返回

总结

可以通过源码去理解事半功倍噢

通过源码分析我们会知道on方法在定义的时候他可以定义多个事件，也可以为同个事件绑定多个处理函数，在定义中还可以是数组

在emit当中进行trycate的处理，所以我们抛出异常的时候我们不会中断整个程序而崩溃

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue 通过this.$emit()方法子组件向父组件传值(步骤分享)

    目录 子组件使用this.$emit()向父组件传值 第一步 在父组件中引入子组件 第二步 子组件向父组件传值 子组件使用this.$emit()向父组件传值 首先必须在父组件中引用子组件,然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 import indexImportOrder from './components/indexImportOrder' 声明 //定义组件 components:{ indexImportOrder, }, 使用 <indexImport

  • vue中$emit的用法详解

    vue中$emit的用法详解

    目录 vue2.x vue3.x 子组件 父组件 vue2.x 1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit,让父组件监听到自定义事件 . vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:

  • Vue $emit()不能触发父组件方法的原因及解决

    $emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名 如果修改后还是不行的话,就改用: this.$parent.Event (Event为父组件中的自定义方法) 补充知识:Vue.js 使用 $emit 触发事件填坑 vue的组件内触发外部事件不起作用 vue的组件内触发自定义事件(发外部事件)不起作用 今天学习vue的自定义组件功能,在组件内部触发一个事件,在使用组件的地方使用v-on绑定这个事件,然而触发一直不生效,检查了很多遍的代码都没看出什么问题,代码如下: <div id

  • 关于vue.js中this.$emit的理解使用

    关于vue.js中this.$emit的理解使用

    目录 一.每个 Vue 实例都实现了事件接口 二.注意事项 三.例子及说明 四.总说明 一.每个 Vue 实例都实现了事件接口 即: 1.使用 $on(eventName) 监听事件 2.使用 $emit(eventName, optionalPayload) 触发事件 二.注意事项 1.父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件 2.不能用 $on 监听子组件释放的事件,而必须在模板里直接用 v-on 绑定 三.例子及说明 1.父组件代码及说明 <template>

  • 详解Vue的sync修饰符

    详解Vue的sync修饰符

    1 .指令 指令即 Directive,从字面意思理解就是我告诉你要做什么,就是发送了一个指令,然后由接收指令的人去做就好了.在 Vue 中的指令有个统一好认的格式,就是以 v- 开头的就是指令,如: <div v-text="x"> </div> //v-text指定标签文本指令 <div v-on:click="add"> <div> //v-on事件绑定指令 但并不是所有的指令都以 v- 开头,对于一些简写,也是

  • 详解VUE自定义组件中用.sync修饰符与v-model的区别

    .sync修饰组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-03</title> <!-- 引入Vue --> <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css&q

  • vue中的.sync修饰符用法及原理分析

    目录 .sync修饰符用法及原理 例如 .sync修饰符的用法总结 需求描述 解决方案 .sync修饰符用法及原理 vue中我们经常会用v-bind(缩写为:)给子组件传入参数. 或者我们会给子组件传入一个函数,子组件通过调用传入的函数来改变父组件的状态. 例如 //父组件给子组件传入一个函数  <MyFooter :age="age" @setAge="(res)=> age = res">  </MyFooter>  //子组件通过

  • vue 组件之间事件触发($emit)与event Bus($on)的用法说明

    组件之间事件触发 之前使用组件,并不是很频繁,是水平的问题,目前工作中,公司大佬带着我手写过一个组件,再此很感谢他的指导.目前简单的组件已经有了自己的逻辑思维,正在从低级码农向中级码农蜕变.废话不多说.上图看看组件情况. 新增按钮组件: 操作按钮组合组件: 此时有个需求就是,无论是哪个按钮,如果改变了列表中的数据,列表需要实时更新数据. 此时就需要用到组件间的事件触发. 父子组件之间事件触发可以使用$emit $emit的使用方法如下: 在子组件中,写一个click点击事件.比如: cancel

  • Vue.sync修饰符与$emit(update:xxx)详解

    目录 Vue .sync修饰符与$emit(update:xxx) .sync修饰符的作用 .sync修饰符之前的写法 使用.sync修饰符的写法 Vue .sync修饰符与$emit(update:xxx) .sync修饰符的作用 在对一个 prop 进行“双向绑定,单向修改”的场景下,因为子组件不能直接修改父组件,sync在2.3版本引入,作为一个事件绑定语法糖,利用EventBus,当子组件触发事件时,父组件会响应事件并实现数据更新,避免了子组件直接修改父组件传过来的内容. .sync修饰

  • Vue中$on和$emit的实现原理分析

    目录 Vue中发布订阅模式 $emit和$on用法深挖 首先剖析一下$on的原理实现 有一点要记住先定义的先触发 分析$emit 先打个断点 Vue中发布订阅模式 在Vue中采用了发布订阅模式,典型的兄弟组件间的通信$on和$emit 发布订阅模式:(订阅者.发布者.信号中心) 一个发布者$emit发布一个事件到信号中心 eventBus ,订阅者们 $on 通过信号中心收到该事件,进行处理 在这里模拟一个自定义事件 $on和$emit事件 class EventBus{ constructor

  • vue scoped与深度选择器deep的原理分析

    目录 scoped的作用 deep作用 总结 JS引入模块化概念后,变得更易于开发维护,但是css样式由于其特殊性,一直没有实现模块化,scoped的出现就是为了实现样式模块化,其本质利用属性选择器实现的一种伪模块化,并非真正意义上的模块化,但这已经让css模块化前进了一大步,要知道JS的模块化也是以这种方式开始的,比如早期的seajs,requirejs都是利用闭包封装达到模块化的效果,后来慢慢的出现了ES6的模块化规范import/export,说不定未来的某一天css也会出现真正的模块化,

  • vue.js $refs和$emit 父子组件交互的方法

    本文介绍了vue.js $refs和$emit 父子组件交互的方法,分享给大家,废话不多说直接看代码: <strong>父调子 $refs (把父组件的数据传给子组件) </strong><br><br><template> <div id="app"> <input type="button" name="" id="" @click="

  • 对vue.js中this.$emit的深入理解

    对于vue.js中的this.emit的理解:this.emit('increment1',"这个位子是可以加参数的"):其实它的作用就是触发自定义函数. 看例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="vue.js"

  • Vue.js原理分析之nextTick实现详解

    前言 tips:第一次发技术文章,篇幅比较简短,主要采取文字和关键代码表现的形式,希望帮助到大家.(若有不正确还请多多指正) nextTick作用和用法 用法:nextTick接收一个回调函数作为参数,它的作用是将回调延迟到下一次DOM更新之后执行,如果没有提供回调函数参数且在支持Promise的环境中,nextTick将返回一个Promise. 适用场景:开发过程中,开发者需要在更新完数据之后,需要对新DOM做一些操作,其实我们当时无法对新DOM进行操作,因为这时候还没有重新渲染,这时候nex

  • Vue 数据绑定的原理分析

    原理 其实原理很简单,就是拦截了Object的get/set方法,在对数据进行set(obj.aget=18)时去重现渲染视图 实现方式有两种 方式1 定义了同名的get/set就相当于定义了age var test = { _age: 18, get age() { console.log('触发get'); //直接会this.age会进入死递归的 return this._age; }, set age(age) { console.log('触发set'); this._age = ag

  • 浅谈vue实现双向事件绑定v-model的原理

    目录 解释: 总结 补充 与js或者jquery直接改变操作dom不同,vue使用v-model实现数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素. v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值 官方文档这么解释: v-model只不过是一个语法糖而已,真正的实现靠的还是 v-bind:绑定响应式数据 触发 input 事件 并传递数据 (核心和重点) 如下代码 <input

  • Vue 组件上的v-model双向绑定原理解析

    目录 组件上的v-model原理 v-model编译阶段 组件生成阶段 之前我们分析了Vue中v-model指令在普通表单元素上的使用原理(点击这里跳转),这一节我们继续分析v-model指令在组件上的原理. 组件上的v-model原理 v-model指令在组件上的编译过程的parse阶段与在表单元素上一样(可以参考),与普通表单元素不同之处在于genCode的阶段,在执行model函数生成代码的时候,会执行genComponentModel函数: v-model编译阶段 export defa

  • Vue 2源码解读$mount函数原理

    目录 1. $mount 函数来源 2. runtime 运行时的 $mount 函数 2.1 mountComponent 函数 2.2 _update 函数(首次渲染) 3. runtime-with-compiler 的 $mount 函数 4. runtime 对 Vue 构造函数的其他修改 1. $mount 函数来源 上一节虽然直接从 core 目录下找到了 Vue 的构造函数定义,但是缺少 $mount 方法.所以直接从开发过程中使用的 vue.esm.js 找到对应的源码入口.

随机推荐