封装事件订阅来进行非父子组件的传值(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的文档都说的很清楚,但是第三种文档上确只有 ...
随机推荐
- java开发两年!这些异常处理的方式你得知道,不然你凭什么涨薪!
前言 异常是在程序中导致程序中断运行的一种指令流,当异常发生时,程序将直接中断,不再执行后续的任何操作! 示例:两数相除,若不处理任何异常,则只有在正确输入两个数字时,才能显示出运算结果. publi ...
- 如何在FL Studio中使用自动剪辑(下)
在上集中我想大家介绍了FL Stduio Automation Clip的创建.播放列表操作及包络线类型介绍,在这篇文章中我将会给大家介绍如何在播放列表中使用Automation,剪辑通道的操作及使用 ...
- 让mac电脑更简单运行Windows软件的CrossOver,优势知多少?
如今,一些iPhone和iPad机型拥有Face ID功能,此功能作用允许用户通过面部识别来解锁设备.该功能还不能在Mac上使用,但是国外媒体于7月27日报道称,在公测第三版的macOS Big Su ...
- Word1-提取图片文字
1.OneNote # 将图片以图片格式粘贴在OneNote中-右键选择"复制图片中的文本"-粘贴"只保留文本"即可 这种方式识别率较高!!! 2.手机QQ图片 ...
- flink:StreamGraph转换为JobGraph
1 转换基本流程 2 简单来看可以分为两部分: 第一部分是通过一些util.translator.generator等类将职责进行解耦.托管和分离,期间涉及FlinkPipelineTranslati ...
- python批量爬取猫咪图片
不多说直接上代码 首先需要安装需要的库,安装命令如下 pip install BeautifulSoup pip install requests pip install urllib pip ins ...
- redis数据量大时bgsave线程阻塞redis原因
rt 转载 Latency generated by fork In order to generate the RDB file in background, or to rewrite the A ...
- 数论之prufer序列
定义 \(Prufer\) 数列是无根树的一种数列. 在组合数学中,\(Prufer\) 数列由有一个对于顶点标过号的树转化来的数列,点数为 \(n\) 的树转化来的 \(Prufer\) 数列长度为 ...
- JDK7HashMap
JDK7HashMap 成员变量 HashMap中定义了非常多的成员变量以及常量,各成员变量含义具体如下: //默认初始化长度-16 static final int DEFAULT_INITIAL_ ...
- 解决 Zuul 中 OAuth2 报 unauthorized 错误
问题描述 微服务中使用 OAuth2 鉴权,直接访问正常,通过 Zuul 访问报错: { "error": "unauthorized", "erro ...