封装事件订阅来进行非父子组件的传值(React)
const list={} // 将事件名和事件函数装进事件池里
function $on(name,func) {
if(!name || !func) return;
if(!Object.keys(list).includes(name)){
list[name]=func;
}
}
// 根据事件名称搜索事件池 找到执行
function $emit(name,...arg) {
if(!name) return;
if(Object.keys(list).includes(name)){
list[name](...arg)
}
} // 执行完并且不在需要后 清除事件
function $off(name) {
if(!name) return;
if(Object.keys(list).includes(name)){
list[name]=null;
delete list[name]
}
}
export {
$on,
$emit,
$off,
}
封装事件订阅来进行非父子组件的传值(React)的更多相关文章
- Vue父子,子父,非父子组件之间传值
Vue组件基础 纯属随笔记录,具体详细教程,请查阅vue.js网站 子组件给父组件传值: <body> <div id="app"> <my-app& ...
- Vue-发布订阅机制(bus)实现非父子组件的传值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- 组件基础(非父子组件传值)—Vue学习笔记
最近几天忙着写Api去了,抽空把后面的内容下出来,然后再分享给大家web可以使用的api. 上次说了父子组件直接的传值,这次看一下非父子组件之间的传值(总线机制) 要实现非父子组件之间的传值非常重要的 ...
- Vue组件传值,父传子,子传父,非父子组件
vue3中传值方式: 1.父组件向子组件传值 父组件Blog.vue <template> <div id="blog"> <Alert v-if=& ...
- Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 非父子组件之间的传值(Bus/总线/发布订阅模式/观察者模式)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue bus方式解决非父子组件间的传值
对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
随机推荐
- 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储
在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...
- Windows SMBv3 CVE-2020-0796 漏洞分析和l漏洞复现
0x00 漏洞描述 漏洞公告显示,SMB 3.1.1协议中处理压缩消息时,对其中数据没有经过安全检查,直接使用会引发内存破坏漏洞,可能被攻击者利用远程执行任意代码.攻击者利用该漏洞无须权限即可实现远 ...
- jenkins 中邮件发送
1.安装插件 jenkins中安装邮件插件,选择Email Extension 2.开启smtp服务,每个客户端的设置不一样,下图是qq邮箱,仅供参考 3.设置邮件服务 3.1系统设置 3.2 在任务 ...
- 配置jdb
目录 注:1)查看当前Linux系统是否已经安装java 1.把jdk文件的压缩包拖入虚拟机 2.找到刚刚拖拽的文件 3.在usr/local下创建jdk的文件夹 4.解压jdk的文件,并存放在刚刚创 ...
- 好端端的数据结构,为什么叫它SB树呢?
大家好,今天给大家介绍一个很厉害的数据结构,它的名字就很厉害,叫SB树,业内大佬往往叫做傻叉树.这个真不是我框你们,而是它的英文缩写就叫SBT. SBT其实是英文Size balanced tree的 ...
- python sklearn库实现逻辑回归的实例代码
Sklearn简介 Scikit-learn(sklearn)是机器学习中常用的第三方模块,对常用的机器学习方法进行了封装,包括回归(Regression).降维(Dimensionality Red ...
- 顺序结构(C语言基本结构)
顺序结构 1.基本概念 语句执行的顺序与顺序程序书写的顺序一致 特点 a.程序执行的顺序和语句书写的顺序一致 b.有一个数据入口,一个数据出口 顺序结构与四则运算 顺序结构是C语言的基本结构 程序由上 ...
- mqProducer
producer核心属性:生产者所属组,消息服务器在回查事物状态时会随机选择该组中任何一个生产者发起事务回查请求. createTopicKey:默认topicKey defaultTopicQueu ...
- 学会了这一招,距离Git大神不远了!
大家好,今天我们来介绍git当中一项非常重要的功能--交互式工具 有的时候如果我们要处理的文件很多,使用git add .等操作会非常有隐患,因为很有可能我们一不小心就疏忽了一些内容.如果我们使用一个 ...
- 《我想进大厂》之Spring夺命连环10问
1.说说Spring 里用到了哪些设计模式? 单例模式:Spring 中的 Bean 默认情况下都是单例的.无需多说. 工厂模式:工厂模式主要是通过 BeanFactory 和 Application ...