博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
理解微信小程序Wepy框架的三个事件交互$broadcast,$emit,$invoke
阅读量:5066 次
发布时间:2019-06-12

本文共 1378 字,大约阅读时间需要 4 分钟。

$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

转载于:https://www.cnblogs.com/suihang/p/10456807.html

你可能感兴趣的文章
软件目录结构规范
查看>>
mysqladmin
查看>>
解决 No Entity Framework provider found for the ADO.NET provider
查看>>
设置虚拟机虚拟机中fedora上网配置-bridge连接方式(图解)
查看>>
[置顶] Android仿人人客户端(v5.7.1)——人人授权访问界面
查看>>
ES6内置方法find 和 filter的区别在哪
查看>>
Android实现 ScrollView + ListView无滚动条滚动
查看>>
java学习笔记之String类
查看>>
UVA 11082 Matrix Decompressing 矩阵解压(最大流,经典)
查看>>
硬件笔记之Thinkpad T470P更换2K屏幕
查看>>
iOS开发——缩放图片
查看>>
HTTP之URL的快捷方式
查看>>
满世界都是图论
查看>>
配置链路聚合中极小错误——失之毫厘谬以千里
查看>>
蓝桥杯-分小组-java
查看>>
Android Toast
查看>>
iOS开发UI篇—Quartz2D使用(绘制基本图形)
查看>>
docker固定IP地址重启不变
查看>>
桌面图标修复||桌面图标不正常
查看>>
JavaScript基础(四)关于对象及JSON
查看>>