封装事件订阅来进行非父子组件的传值(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的文档都说的很清楚,但是第三种文档上确只有 ...
随机推荐
- laravel5.5 如何创建Facades并使用
laravel Facades概念略,自行百度. 如何创建Facades使用步骤1. 创建一个php文件,App\Utils\SmsSend.php.<?php namespace App\Ut ...
- 测试_QTP简介
一:什么是QTP? QTP(QuickTest Professional)是一款自动化测试工具,自动化测试就是利用计算机模拟人进行测试,也就是开发一套代码测试另一套代码. QTP主要用它来执行重复的手 ...
- Python_scrapyRedis零散
1. # Redis 1.解压,配环境变量 2.win上设置自启动 redis-server --service-install D:\redis\redis.windows.conf --logle ...
- Jmeter 处理接口乱码
第一步:添加 BeanShell Listener 第二步: 设置值 : prev.setDataEncoding("UTF-8") 第三步: 重新跑脚本,看接口返回值
- Java web项目 上传图片保存到数据库,并且查看图片,(从eclipse上移动到tomact服务器上,之路径更改,包括显示图片和导出excel)
//项目做完之后,在本机电脑运行完全正常,上传图片,显示图片,导出excel,读取excel等功能,没有任何问题,但是,当打成war包放到服务器上时,这些功能全部不能正常使用. 最大的原因就是,本机测 ...
- Weblogic CVE-2020-2551漏洞复现&CS实战利用
Weblogic CVE-2020-2551漏洞复现 Weblogic IIOP 反序列化 漏洞原理 https://www.anquanke.com/post/id/199227#h3-7 http ...
- 4.1 Spring源码 --- 监听器的原理
目标: 1. 监听器如何使用 2. 监听器的原理 3. 监听器的类型 4. 多播器的概念和作用 5. 接口类型的监听器是如何注册的? 6. 注解类型的监听器和如何注册的? 7. 如果想在所有的bean ...
- Boom 3D带你聆听《我们的乐队》音乐盛宴
说到前段时间大热的音乐类综艺节目,<我们的乐队>肯定值得一提.<我们的乐队>是由谢霆锋.萧敬腾.王俊凯担任导师,以团队的形式组成各种风格的乐队,并通过同场比拼,最终选出获胜的乐 ...
- 利用css3和js实现旋转木马图片小demo
先看效果图: 上源码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- IDEA创建web工程,不用Archetype(超简单)
Idea不用Archetype创建Web项目 以新建模块为例. 新建Maven项目 不勾选[Create from artchetype],直接Next pom中添加一句话: <artifact ...