const eventList = {}
const $on = (eventName,callback)=>{
if(!eventList[eventName]){
eventList[eventName] = [];
}
eventList[eventName].push(callback)
}
const $emit = (eventName,params)=>{
if(eventList[eventName]){
let arr = eventList[eventName];
arr.map((cb)=>{
cb(params);
})
}
}
const $off = (eventName,callback)=>{
if(eventList[eventName]){
if(callback){
let index = eventList[eventName].indexOf(callback);
eventList[eventName].splice(index,1);
}else{
eventList[eventName].length = 0;
}
}
}
export default {
$on,
$emit,
$off
}

封装好的observer.js,用于非父子组件传值,直接调用$on和$emit方法的更多相关文章

  1. vue中父子组件传值问题 通过props 和 $emit()方法

    (代码在最后) 1.父组件给子组件传值直接通过props,听着很简单,但是对于初学者来说还是比较难以理解的,今天小白通过自己的实践操作结合代码分析一下 案例  把模态框单独的抽离出来,当作一个组件 第 ...

  2. vue 非父子组件传值

    /*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...

  3. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

  4. Vue非父子组件传值

    <template> <div id="app"> <v-home></v-home> <br> <hr> ...

  5. Vue组件传值(二)之 非父子组件传值

    Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...

  6. 组件基础(非父子组件传值)—Vue学习笔记

    最近几天忙着写Api去了,抽空把后面的内容下出来,然后再分享给大家web可以使用的api. 上次说了父子组件直接的传值,这次看一下非父子组件之间的传值(总线机制) 要实现非父子组件之间的传值非常重要的 ...

  7. vuejs非父子组件传值

    当父组件要给孙子,或者孙子与孙子要传值的时候怎么传,一层一层传太麻烦了,vuejs提供了一中模式叫发布订阅模式(观察者模式,bus,总线)来处理非父子组件间的传值 <div id='root'& ...

  8. React 父子组件和非父子组件传值

      零.this.props     可以接收到 外界的传值 和 此组件标签内部自定义的方法       例:         <one vals={message} sendVal={this ...

  9. Vue组件通信之非父子组件传值

    前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是 ...

随机推荐

  1. framework7 Autocomplete (自动完成) 具体使用

    官网地址:https://framework7.io/docs/autocomplete.html#autocomplete-parameters 效果图: <meta charset=&quo ...

  2. windows2008 开启SNMP服务

    现在很多企业和公司管理服务器时都是通过网络监控软件对服务器的状态进行监控,在监控的时候大多是通过SNMP协议(简单网络管理协议)进行的,那么在我们的服务器端就需要开启此项服务,并进行简单的设置. 以下 ...

  3. 服务发现对比:Zookeeper vs etcd vs Consul

    我们拥有的服务越多,如果我们使用预定义的端口,就会发生冲突的可能性越大.毕竟,在同一端口上不能监听两个服务.管理一百个服务所使用的所有端口的紧密列表本身就是一项挑战.将那些服务所需的数据库添加到该列表 ...

  4. linux基础命令汇总

    目录 linux系统结构 常用命令 切换目录命令cd 文件操作 vi和vim编辑器 重定向输出>和>> 管道 | &&命令执行控制 网络通讯命令 系统管理命令 用户和 ...

  5. poj 2102 A计划

    可怜的公主在一次次被魔王掳走一次次被骑士们救回来之后,而今,不幸的她再一次面临生命的考验.魔王已经发出消息说将在T时刻吃掉公主,因为他听信谣言说吃公主的肉也能长生不老.年迈的国王正是心急如焚,告招天下 ...

  6. JavaWeb第一天--HTML

    HTML HTML简介 HTML(Hyper TextMarkupLanguage) 超文本标记语言. 超文本: 超越了文本仅仅展示信息的功能范畴,泛指:图片.有样式的文字.超链接. 标记: 标签. ...

  7. JavaScript设计模式与开发实践随笔(一)

    编程语言按照数据类型大体可以分为两类,一类是静态类型语言,另一类是动态类型语言. 静态类型语言在编译时便已确定变量的类型,而动态类型语言的变量类型要到程序运行的时 候,待变量被赋予某个值之后,才会具有 ...

  8. Ubuntu下的log日志查看器

    1.lnav:Linux 下一个基于控制台的高级日志文件查看器 https://www.cnblogs.com/michealLang/p/9761886.html http://www.imooc. ...

  9. OCR3:tesseract script

    通过命令:tesseract -h 可查看 OCR操作脚本参数: 其中参数说明: –-oem:指定使用的算法,0:代表老的算法:1:代表LSTM算法:2:代表两者的结合:3:代表系统自己选择. –-p ...

  10. flask ajax发送请求返回400

    在flaskWTF使用csrf保护后,一般提交form表单都需要一个隐藏的csrf 这样可以成功提交,但是使用ajax提交时就不能成功提交,会返回400错误,服务器无法理解请求,这样就需要新的方法解决 ...