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 通过事件监听 实现组件间传值的更多相关文章

  1. taro 填坑之路(三)taro 缓存

    1.taro 缓存 /** * 缓存数据 H5 小程序 * {food.id:{菜品信息 Num}, } */ import Taro from '@tarojs/taro'; // 取值 let s ...

  2. taro 填坑之路(一)taro 项目回顾

    (1)像素写法 PX -- 大写,否则会自动成rem (2)拿取列表第一条数据 let { activity:[firstItem] } = this.state; (3)使用props 需要设置默认 ...

  3. Android Studio 3.0正式版填坑之路

    原文:https://www.jianshu.com/p/9b25087a5d7d   Android Studio 3.0启动图 序言 总看别人的文章,今天尝试着自己来写一篇.在逛论坛时候,无意间发 ...

  4. 微信公众号支付备忘及填坑之路-java

    一.背景 最近公司给第三方开发了一个公众号,其中最重要的功能是支付,由于是第一次开发,遇到的坑特别的多,截止我写博客时,支付已经完成,在这里我把遇到的坑记录一下(不涉及退款).不得不吐槽一下,腾讯这么 ...

  5. 基于环信SDK的IM即时通讯填坑之路(vue)

    公司最近使用第三方环信SDK的进行通信聊天,基本已完成.记录下填坑之路 1.可以通过以下方式引用 WebSDK 1.安装 npm install easemob-websdk --save 2. 先 ...

  6. Android事件监听(二)——点击鼠标事件

    Button.ImageButton事件监听(setOnClickListener) 方法一:通过匿名内部类实现 代码如下: package com.note.demo2; import androi ...

  7. WebView使用详解(二)——WebViewClient与常用事件监听

      登录|注册     关闭 启舰 当乌龟有了梦想……       目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书      免费直播:AI时代,机器学习如何入门?      程序员8 ...

  8. Vue学习(二)-Vue中组件间传值常用的几种方式

    版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...

  9. Vue学习笔记(二)动态绑定、计算属性和事件监听

    目录 一.为属性绑定变量 1. v-bind的基本使用 2. v-bind动态绑定class(对象语法) 3. v-bind动态绑定class(数组语法) 4. v-bind动态绑定style(对象语 ...

随机推荐

  1. [BZOJ2594][WC2006]水管局长加强版(LCT+Kruskal)

    2594: [Wc2006]水管局长数据加强版 Time Limit: 25 Sec  Memory Limit: 128 MBSubmit: 4452  Solved: 1385[Submit][S ...

  2. 启动Tensorboard时发生错误:class BeholderHook(tf.estimator.SessionRunHook): AttributeError: module 'tensorflow.python.estimator.estimator_lib' has no attribute 'SessionRunHook'

    报错:class BeholderHook(tf.estimator.SessionRunHook):AttributeError: module 'tensorflow.python.estimat ...

  3. [转]Android 中fill_parent与wrap_content的区别

        在Android中,对于组件的属性“layout_width”和“layout_height”, 其值总是设置为“wrap_content”或“fill_parent”. 那么,这两个值有什么 ...

  4. mui中a标签的跳转问题

    一.脑补 快速响应是mobile App实现的重中之重,研究表明,当延迟超过100毫秒,用户就能感受到界面的卡顿,然而手机浏览器的click点击存在300毫秒延迟(至于为何会延迟,及300毫秒的来龙去 ...

  5. 如何理解Hibernate中的HibernateSessionFactory类

    package com.zz.util; import org.hibernate.HibernateException; import org.hibernate.Session; import o ...

  6. SQL SERVER 函数与SQL语法

    http://www.cnblogs.com/hoojo/archive/2011/07/16/2108129.html

  7. soa文章摘抄

    from: http://blog.vsharing.com/fengjicheng/MC19136/ 浅析深究什么是SOA? (入选推荐日志,加10币)浅析深究什么是SOA? 金蝶中间件有限公司总经 ...

  8. Java中23种经典设计模式详解

    Java中23种设计模式目录1. 设计模式 31.1 创建型模式 41.1.1 工厂方法 41.1.2 抽象工厂 61.1.3 建造者模式 101.1.4 单态模式 131.1.5 原型模式 151. ...

  9. js 的push方法

    JavaScript push() 方法 定义和用法 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. 语法 arrayObject.push(newelement1,newele ...

  10. JavaScript 你不知道的事 -- 关于函数

    接上篇Javascript 你不知道的事,直接条列了: 每个函数创建时默认带有一个prototype属性,其中包含一个constructor属性,和一个指向Object对象的隐藏属性__proto__ ...