通过vue手动封装on、emit、off的代码详解

一、概念

1. $on("事件名称"，回调函数)

事件绑定，一个事件名称上面可能绑定多个函数

2. $emit("事件名称"，需要传递的值)

事件触发时，会触发当前事件身上所有的函数

3. $off("事件名称"，[需要解绑的函数])

事件解绑时，若指定解绑函数则只解绑相应函数，否则解绑全部

二、手动封装on，emit，off事件在vue中的作用

|  在vue中进行非父子组件传值时，我们可以通过在vue的原型上添加一个公共的vue实例，组件之间调用这个公共实例的$on/$emit来传递数据，传递的一方调用$emit，接收的一方调用$on。

Vue.prototype.Observer = new Vue();  //实例化对象

|  这种方式能使所有对象拥有共同的on和emit，但是增加的属性所挂载的实例对象太大，就相当于你的一台法拉利的轮子坏了，你又买了一台新的法拉利并卸掉它的轮子，放到了原来的法拉利上，这十分耗费性能。因此，我们可以手动封装事件，来实现非父子传值。

import Observer from "./Observer"; //引入封装好的文件
Vue.prototype.Observer = Observer;  //将其添加到vue的原型上

三、封装on，emit，off事件

1. $on：创建一个事件仓库存放事件，判断事件名称是否存在。若不存在，初始化创建一个数组；若存在，将当前函数push到数组中。

const EventList = {}; //一个事件名称上面可能绑定多个函数，因此是一对多的模式，即观察者模式，数据类型采用对象
const on = function(eventName,callback){
  if(!EventList[eventName]){
    EventList[eventName] = [];
  }

  EventList[eventName].push(callback);
}

2. $emit：判断事件名称是否存在。若不存在，直接返回return；若存在，对当前事件名称所对应的所有函数进行遍历，并将参数传递过去。

const emit = function(eventName,params){
  if(!EventList[eventName])return;

  EventList[eventName].map((cb)=>{
    cb(params)
  })
}

3. $off：判断事件名称是否存在。若不存在，直接返回return；若存在，判断callback是否存在，如果存在则删除对应下标的的函数，如果不存在则将当前数组清空。

const off = function(eventName,callback){
  if(!EventList[eventName])return;

  if(callback){
    let index = EventList[eventName].indexOf(callback);
    EventList[eventName].splice(index,1);
  }else{
    EventList[eventName] = [];
  }
}

4. 导出：便于在其他文件中调用。

export default {
  $on : on,
  $emit : emit,
  $off : off
}

总结

以上所述是小编给大家介绍的通过vue手动封装on、emit、off的代码详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue2.0 中#$emit,$on的使用详解

    vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以由vm.$emit触发.回调函数会接收所有传入事件触发函数的额外参数. vm.$emit( event, [-args] ) 触发当前实例上的事件.附加参数都会传给监听器回调. 例子: //父组件 <template> <ratingselect @select-type="onSele

  • vue中$refs, $emit, $on, $once, $off的使用详解

    1.$refs的使用场景 父组件调用子组件的方法,可以传递数据. 父组件: <div id="app"> <child-a ref="child"></child-a> <button @click="getMyEvent">点击父组件</button> <div> <script> import ChildA from './child.vue' export

  • Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信

    最近在学习vue组件鸡组件之前通信问题,正好看到,以此来留作笔记. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <script type=

  • vuejs使用$emit和$on进行组件之间的传值的示例

    vuejs使用$emit和$on进行组件之间的传值的示例

    $emit和$on可以实现组件之间的传值,我们知道父组件传值给子组件使用props,但是不允许子组件传值给父组件,这时候使用这个就可以实现了. 注意:$emit和$on的事件必须在一个公共的实例上,才能够触发. 例子:我要实现某个系统的通讯录功能,在web端我们可以使用基于jQuery的ztree插件实现目录的展现,但是在vuejs框架里面,tree目录需要通过递归组件实现. 1.现在有两个组件,父组件contact_index.vue,子组件cust_tree.vue 2.点击父组件里面的选择

  • 使用Vue.observable()进行状态管理的实例代码详解

    随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况. 先看下官网描述,如下图 observable()方法,用于设置监控属性,这样就可以监控viewModule中的属性值的变化,从而就可以动态的改变某个元素中的值,监控属性的类型不变量而

  • vue实现绑定事件的方法实例代码详解

    一.前言 vuejs中的事件绑定,使用<v-on:事件名 = 函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法. 二.事件绑定方式 1. 直接在标签中写js方法  <button v-on:click="alert('hi')">执行方法的第一种写法</button> 2.调用method的办法 <button v-on:click="run()">执行方法的第

  • vue中使用mxgraph的方法实例代码详解

    1.npm 引入 npm install mxgraph --save 2.这个模块可以使用require()方法进行加载.它将返回一个接受对象作为选项的工厂函数.必须将mxBasePath选项提供给工厂函数,而不是将其定义为一个全局变量. var mxgraph = require("mxgraph")( { // 以下地址不需要修改 mxImageBasePath: "./src/images", mxBasePath: "./src" })

  • vue中datepicker的使用教程实例代码详解

    写这个文章主要是记录下用法,官网已经说的很详细了 npm install vue-datepicker --save html代码 <myDatepicker :date="startTime" :option="multiOption" :limit="limit"></myDatepicker> <myDatepicker :date="endtime" :option="timeo

  • vue更改数组中的值实例代码详解

    根据下标更改时 vm为新建的vue对象 ind为数组 第一个e为在数组ind中e索引位置 第二个e为更改为值e vm.$set(vm.ind,e,e) 常规更改 arr为数组 //添加 arr.push(1); //删除 arr.splice(*,*); //替换 arr.splice(*,*,*); splice方法 实例 例子 1 在本例中,我们将创建一个新数组,并向其添加一个元素: <script type="text/javascript"> var arr = n

  • vue 使用v-for进行循环的实例代码详解

    代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.n

  • Vue编程式跳转的实例代码详解

    编程式跳转的实现代码,如下所示: <template> <ul class = "prolist"> <!-- //产品 --> <!-- :to = "/detail/item.id" --> <!-- 声明式跳转 :to = "{ name: 'detail',params: { id: item.id } }" --> <!-- <router-link :to = &

  • Vue组件中prop属性使用说明实例代码详解

    Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名: Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h

  • vue 中简单使用mock的示例代码详解

    vue 中简单使用mock的示例代码详解

    一.首先,在vue项目中,安装依赖 # 使用axios发送ajax cnpm install axios --save # 使用mockjs产生随机数据 cnpm install mockjs --save-dev # 使用json5解决json文件,无法添加注释问题 cnpm install json5 --save-dev 二.在根目录下,新建一个mock文件 三.在vue.config.js文件中使用mock数据 四.配置mock中的index.js数据 const fs = requir

  • Vue+Element switch组件的使用示例代码详解

    Vue+Element switch组件的使用示例代码详解

    代码如下所示: <el-table-column label="商品状态" align="center"> <template slot-scope="{row}"> <el-switch v-model="row.goods_state" class="switch" :active-value="1" :inactive-value="0&qu

随机推荐