封装事件订阅来进行非父子组件的传值(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的文档都说的很清楚,但是第三种文档上确只有 ...
随机推荐
- EF Core 二 、 入门 EF Core
入门EF Core 我们将开始真正的EF之旅了,这里使用SqlServer数据,然后DbFirst: 为嘛使用SqlServer,目前公司的整体业务全部在SqlSever,所以很多产品业务都是依托于这 ...
- MySQL索引背后的数据结构及原理
摘要 本文以MySQL数据库为研究对象,讨论与数据库索引相关的一些话题.特别需要说明的是,MySQL支持诸多存储引擎,而各种存储引擎对索引的支持也各不相同,因此MySQL数据库支持多种索引类型,如BT ...
- impala语句
0.保留两位小数 round(字段a, 需要保留几位小数) round( data, 4) 1. case wen case when 字段a = '01' and 字段b = '01' and 字段 ...
- 图解HTTP简单笔记【上】
第一章 了解WEB及网络基础(省略了TCP/IP的知识点) 1.1.使用HTTP协议访问web 当我们在主机的浏览器的地址输入URL之后 请求将回发送至目标服务器 目标服务器在接受到响应请求时将会响 ...
- Redis 用的很溜,了解过它用的什么协议吗?
我是风筝,公众号「古时的风筝」,一个兼具深度与广度的程序员鼓励师,一个本打算写诗却写起了代码的田园码农! 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在 ...
- bootstrap-datetimepicker的两种版本
1.引入js/css <link rel="stylesheet" th:href="@{/plugin/bootstrap-datetimepicker/boot ...
- Folx使用教程:怎么通过设置标签分类下载内容
很多Mac OS下载软件从网上下载各种各样的文件,一般默认都会存放在"下载"文件夹中.如果不是经常整理"下载"文件夹,久而久之,该文件夹会变得庞大而杂乱. 如果 ...
- JUC并发工具包之CyclicBarrier & CountDownLatch的异同
1.介绍 本文我们将比较一下CyclicBarrier和CountDownLatch并了解两者的相似与不同. 2.两者是什么 当谈到并发,将这两者概念化的去解释两者是做什么的,这其实是一件很有挑战的事 ...
- JVM垃圾回收器、内存分配与回收策略
新生代垃圾收集器 1. Serial收集器 serial收集器即串行收集器,是一个单线程收集器. 串行收集器在进行垃圾回收时只使用一个CPU或一条收集线程去完成垃圾回收工作,并且会暂停其他的工作线程( ...
- HTML+JavaScript画函数图像
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...