taro 填坑之路(二)taro 通过事件监听 实现组件间传值
1.组件传值的方式

2.事件监听原理

3.事件管理器
utils/event.js
/**
* 事件池(事件管理器)
* 通过事件监听传值
*/
class Event {
constructor() {
this.events = {};
} // 监听
on(eventName,callBack){
if(this.events[eventName]){
// 存在事件
this.events[eventName].push(callBack);
}else{
// 不存在事件
this.events[eventName] = [callBack];
}
} // 触发
emit(eventName,params){
if(this.events[eventName]){
this.events[eventName].map((callBack) => {
callBack(params);
})
}
}
} export default Event;
4.调用实例
import Event from './event';
let myEvent = new Event(); // 实例化一个事件管理器 // 触发事件
myEvent.emit("changeCata"); // 监听事件
myEvent.on("changeCata",() => {
//
});
5.
taro 填坑之路(二)taro 通过事件监听 实现组件间传值的更多相关文章
- taro 填坑之路(三)taro 缓存
1.taro 缓存 /** * 缓存数据 H5 小程序 * {food.id:{菜品信息 Num}, } */ import Taro from '@tarojs/taro'; // 取值 let s ...
- taro 填坑之路(一)taro 项目回顾
(1)像素写法 PX -- 大写,否则会自动成rem (2)拿取列表第一条数据 let { activity:[firstItem] } = this.state; (3)使用props 需要设置默认 ...
- Android Studio 3.0正式版填坑之路
原文:https://www.jianshu.com/p/9b25087a5d7d Android Studio 3.0启动图 序言 总看别人的文章,今天尝试着自己来写一篇.在逛论坛时候,无意间发 ...
- 微信公众号支付备忘及填坑之路-java
一.背景 最近公司给第三方开发了一个公众号,其中最重要的功能是支付,由于是第一次开发,遇到的坑特别的多,截止我写博客时,支付已经完成,在这里我把遇到的坑记录一下(不涉及退款).不得不吐槽一下,腾讯这么 ...
- 基于环信SDK的IM即时通讯填坑之路(vue)
公司最近使用第三方环信SDK的进行通信聊天,基本已完成.记录下填坑之路 1.可以通过以下方式引用 WebSDK 1.安装 npm install easemob-websdk --save 2. 先 ...
- Android事件监听(二)——点击鼠标事件
Button.ImageButton事件监听(setOnClickListener) 方法一:通过匿名内部类实现 代码如下: package com.note.demo2; import androi ...
- WebView使用详解(二)——WebViewClient与常用事件监听
登录|注册 关闭 启舰 当乌龟有了梦想…… 目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书 免费直播:AI时代,机器学习如何入门? 程序员8 ...
- Vue学习(二)-Vue中组件间传值常用的几种方式
版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...
- Vue学习笔记(二)动态绑定、计算属性和事件监听
目录 一.为属性绑定变量 1. v-bind的基本使用 2. v-bind动态绑定class(对象语法) 3. v-bind动态绑定class(数组语法) 4. v-bind动态绑定style(对象语 ...
随机推荐
- [POJ2749]Building roads(2-SAT)
Building roads Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 8153 Accepted: 2772 De ...
- apose 根据excel 导出模版
string file = Server.MapPath("~/Excel/ZWxxtj.xls"); DataSet ds = new DataSet(); ...
- Google Code Jam 2010 Round 1C Problem A. Rope Intranet
Google Code Jam 2010 Round 1C Problem A. Rope Intranet https://code.google.com/codejam/contest/61910 ...
- 典型案例收集-使用OpenVPN连通多个机房内网(iptables+静态路由)
说明: 1.这个方案是我最初实现的方案,目的在于OpenVPN连通后使其能访问各自的子网,实现互通. 2.主要以iptables为主,这个是关键点,并且这种方式配置iptables十分复杂,最后加入了 ...
- 支持Tasker控制的app合集
跟各种Tasker插件打交道,原因有两点: 1.站在开发者的角度:Tasker虽为神器,也不能面面俱到,一个原因就是Android自身过于分裂化造成的,不可能兼顾全平台和机型:个人开发者精力有限,也满 ...
- Druid 配置_DruidDataSource参考配置
以下是一个参考的连接池配置: <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource ...
- 使用代码配置 NHibernate
多数情况下 NHibernate 使用配置文件进行配置, 但是我们也可以使用代码进行配置, 步骤如下: 1. 创建一个 Configuration using Nhibernate.cfg; var ...
- jdbc如何锁定某一条数据或者表,不让别人操作?
jdbc如何锁定某一条数据或者表,不让别人操作? 只有并发的时候才会有死锁,你要把多个涉及到这个表的地方检查一下,排除死锁可能. 为了避免修改冲突,所以我要锁定.请问该如何实现 答: 例如:selec ...
- [翻译] UIView-draggable 可拖拽的UIView
UIView-draggable 可拖拽的UIView https://github.com/andreamazz/UIView-draggable UIView category that adds ...
- thymleaf 常用th 标签
常用th标签都有那些? 关键字 功能介绍 案例 th:id 替换id <input th:id="'xxx' + ${collect.id}"/> th:text 文本 ...