封装好的observer.js,用于非父子组件传值,直接调用$on和$emit方法
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方法的更多相关文章
- vue中父子组件传值问题 通过props 和 $emit()方法
(代码在最后) 1.父组件给子组件传值直接通过props,听着很简单,但是对于初学者来说还是比较难以理解的,今天小白通过自己的实践操作结合代码分析一下 案例 把模态框单独的抽离出来,当作一个组件 第 ...
- vue 非父子组件传值
/*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
- Vue非父子组件传值
<template> <div id="app"> <v-home></v-home> <br> <hr> ...
- Vue组件传值(二)之 非父子组件传值
Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...
- 组件基础(非父子组件传值)—Vue学习笔记
最近几天忙着写Api去了,抽空把后面的内容下出来,然后再分享给大家web可以使用的api. 上次说了父子组件直接的传值,这次看一下非父子组件之间的传值(总线机制) 要实现非父子组件之间的传值非常重要的 ...
- vuejs非父子组件传值
当父组件要给孙子,或者孙子与孙子要传值的时候怎么传,一层一层传太麻烦了,vuejs提供了一中模式叫发布订阅模式(观察者模式,bus,总线)来处理非父子组件间的传值 <div id='root'& ...
- React 父子组件和非父子组件传值
零.this.props 可以接收到 外界的传值 和 此组件标签内部自定义的方法 例: <one vals={message} sendVal={this ...
- Vue组件通信之非父子组件传值
前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是 ...
随机推荐
- 概述UML——UML系列篇一
前言 作为Java应用开发者,日益感觉到对象建模的重要性.系统的复杂性,对于不能全局掌握的我和编程时没有对象模型指导时,编写实现代码时,感觉甚是困难.处于这些原因,这里想借助学习UML建模,在分析需求 ...
- c#读取appsetting.json配置文件
asp.net core 取消了web.config配置文件,而将appsetting.json作为了配置文件. 那么,怎么读取相关数据呢?这里我在appsetting.json中添加一些信息 第一种 ...
- C#DataTable使用方法详解
在项目中常常常使用到DataTable,假设DataTable使用得当,不仅能使程序简洁有用,并且可以提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 1.添加引用 1 2 ...
- 完全图解 HTTPS
安全基础 我们先来看下数据在互联网上数据传递可能会出现的三个比较有代表性的问题,其实后面提到的所有方法,都是围绕解决这三个问题而提出来的. 窃听 伪造 否认 对称密钥加密 假设 A 正在通过互联网向 ...
- robotframework-ride1.7.3.1更新安装
在2019年之前,robotframework-ride的版本一直是1.5.2.1,是2016年1月份的版本,里面需要使用 wxPython2.8-win64-unicode-2.8.12.1-py2 ...
- docker下安装redis集群
docker-compose.yml master: image: redis:4 container_name: redis-cluster_master command: redis-server ...
- 史上最全的整合第三方登录的工具JustAuth
JustAuth,如你所见,它仅仅是一个第三方授权登录的工具类库,它可以让我们脱离繁琐的第三方登录SDK,让登录变得So easy! 参考图例 授权gitee 授权github 授权weibo 授权钉 ...
- U盘出现.exe问题的解决方案
这代表U盘中了AutoRun病毒,原文件并未被删除,只是被设置为隐藏了. 所以切勿直接格式化U盘! 解决方案:分别创建文件1.reg和2.bat: 1.reg Windows Registry Edi ...
- 关于SQL优化
建立索引常用的规则 表的主键.外键必须有索引: 数据量超过300的表应该有索引: 经常与其他表进行连接的表,在连接字段上应该建立索引: 经常出现在Where子句中的字段,特别是大表的字段,应该建立索引 ...
- Golang 在 Mac、Linux、Windows 下如何交叉编译
转自 https://blog.csdn.net/panshiqu/article/details/53788067 Golang 支持交叉编译,在一个平台上生成另一个平台的可执行程序,最近使用了一下 ...