微信小程序Wepy框架的三个事件交互($broadcast,$emit,$invoke)
$broadcast:
$broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消。事件广播的顺序为广度优先搜索顺序,如上图,如果页面Page_Index发起一个$broadcast事件,那么按先后顺序依次接收到该事件的组件为:ComA、ComB、ComC、ComD、ComE、ComF、ComG、ComH。如下图
理解官方意思就是:如果通过当前组件进行$broadcast广播事件,那么就只有它的子组件能接收事件,它的父组件和兄弟组件是无法接收到消息。调用方式如下:
this.$broadcast('eventName', param1,param2,param3,......)
然后在子组件的events里面定义eventName接收事件就行了,如下:
events = {
'eventName': (param1,param2......., $event:Event) => {
}
}
$emit
$emit与$broadcast正好相反,事件发起组件的所有祖先组件会依次接收到$emit事件。如果组件ComE发起一个 $emit事件,那么接收到事件的先后顺序为:组件ComA、页面Page_Index。如下图:
理解官方的意思就是:如果通过当前组件进行$emit广播事件,那么就只有它的父组件能接收事件,它的子组件和兄弟组件是无法接收到消息。调用方式如下:
this.$emit('eventName', param1,param2,param3,......)
然后在父组件的events里面定义eventName接收事件就行了,如下:
events = {
'eventName': (param1,param2......., $event:Event) => {
}
}
$invoke
$invoke是一个页面或组件对另一个组件中的方法的直接调用,通过传入组件路径找到相应的组件,然后再调用其方法。
比如,想在页面Page_Index中调用组件ComA的某个方法:
this.$invoke('ComA', 'someMethod', 'someArgs');
如果想在组件ComA中调用组件ComG的某个方法:
this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');
理解官方的意思就是:如果通过当前组件进行$invoke触发事件,如果父组件已经在components里面引入了子组件就可以直接通过invoke来单独向子组件发送事件;如果是子组件之间的事件交互,第一个参数就需要对应组件的路径。调用方式如下:
父组件向子组件发送事件:
this.$invoke('子组件,必须要单引号括起来', '子组件方法名称', param1,param2,param3.......);
子组件间发送事件:
this.$invoke('子组件的相对路径', '子组件方法名称', param1,param2,param3.......);
作者:会撸码的小马
链接:https://www.jianshu.com/p/3aeca9db1e51
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
微信小程序Wepy框架的三个事件交互($broadcast,$emit,$invoke)的更多相关文章
- 理解微信小程序Wepy框架的三个事件交互$broadcast,$emit,$invoke
$broadcast: $broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消.事件广播的顺序为广度优先搜索顺序,如上图,如果页面Page_Index发起一个$bro ...
- 微信小程序wepy框架开发资源汇总
开源项目 wepy-wechat-demo:基于wepy开发的仿微信聊天界面小程序 深大的树洞:基于wepy开发的树洞类微信小程序 wepy-demo-bookmall:微信小程序
- 微信小程序 wepy框架 之拦截器intercepter使用
1,在使用wepy框架创建的项目下 找到src/app.wpy 2,在app.wpy constructor方法中添加 super(); this.use('promisify');//启用ES6 p ...
- 当微信小程序遇到AR(三)
当微信小程序遇到AR,会擦出怎么样的火花?期待与激动...... 通过该教程,可以从基础开始打造一个微信小程序的AR框架,所有代码开源,提供大家学习. 本课程需要一定的基础:微信开发者工具,JavaS ...
- 微信小程序wepy开发循环wx:for需要注意
微信小程序wepy开发循环wx:for需要注意 item index值必须在wx:for之后使用 <view wx:for="{{tablist}}" class=" ...
- 微信小程序 wafer2框架摘要
微信小程序 wafer2框架摘要 帮助文档:https://github.com/tencentyun/wafer2-startup/wiki 使用了knex.js进行数据库交互,使用了koa.js进 ...
- 微信小程序开发-框架
小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务.框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框 ...
- 微信小程序之生命周期(三)
[未经作者本人同意,请勿以任何形式转载] 上一篇介绍微信小程序开发工具使用和项目目录结构. 这一章节介绍微信小程序的生命周期,什么是生命周期呢? 通俗的讲,生命周期就是指一个对象的生老病死. 从软件的 ...
- 《微信小程序七日谈》- 第三天:玩转Page组件的生命周期
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 前两篇 ...
随机推荐
- 使用JS 加入收藏,设为首页.
<script type="text/javascript" language="javascript"> function AddFavorite ...
- 去掉Linux尖锐的提示音
新装CentOS7,Tab键没有结果的时候,总是有尖锐的提示音,下面是如何去除这个提示音: # /etc/inputrc 找到 ‘#set bell-style none’,去掉注释# # reboo ...
- Oracle 性能调优之:使用 V$SQL_PLAN 视图查询内存中的执行计划
V$SQL_PLAN视图提供了一种方法,可用于检查仍位于库高速缓存的游标的执行计划.此视图中的信息与 PLAN_TABLE 视图中的信息非常类似.但是,EXPLAIN PLAN 显示的是执行相应语句时 ...
- 好记性不如烂笔头-linux学习笔记4apache相关知识
apache 启动有2种模式 1是prefork模式,每个进程对应一个线程,如果是比较稳定的平台,那么prefork模式是worker模式 比较好,效率高,但是吃的内存比较大. 2 如果是高负载高并发 ...
- hex文件和bin文件区别
HEX文件和BIN文件是我们经常碰到的2种文件格式.因为自己也是新手,所以一直对这两个文件懵懵懂懂,不甚了解,最近在做STM32单片机的IAP更新,其中要考虑HEX文件和BIN文件,所以需要学习下这两 ...
- python的接口
写法一: class Payment: def pay(self, money): raise NotImplementedError class Alipay(Payment): def pay(s ...
- 跟我学算法-svm支持向量机算法推导
Svm算法又称为支持向量机,是一种有监督的学习分类算法,目的是为了找到两个支持点,用来使得平面到达这两个支持点的距离最近. 通俗的说:找到一条直线,使得离该线最近的点与该线的距离最远. 我使用手写进行 ...
- 跟我学算法-吴恩达老师(超参数调试, batch归一化, softmax使用,tensorflow框架举例)
1. 在我们学习中,调试超参数是非常重要的. 超参数的调试可以是a学习率,(β1和β2,ε)在Adam梯度下降中使用, layers层数, hidden units 隐藏层的数目, learning_ ...
- docker 基本使用和安装提速
https://www.cnblogs.com/Erik_Xu/p/6662936.html#redis >yum install -y docker 道客提速 先安装curl >yum ...
- uvalive 7299 Boggle
Boggle is a game in which 16 dice with letters on each side are placed into a 4 × 4 grid. Players th ...