微信小程序Wepy框架的三个事件交互($broadcast,$emit,$invoke)

$broadcast:

b r o a d c a s t 事 件 是 由 父 组 件 发 起 , 所 有 子 组 件 都 会 收 到 此 广 播 事 件 , 除 非 事 件 被 手 动 取 消 。 事 件 广 播 的 顺 序 为 广 度 优 先 搜 索 顺 序 , 如 上 图 , 如 果 页 面 P a g e I n d e x 发 起 一 个 broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消。事件广播的顺序为广度优先搜索顺序,如上图,如果页面Page_Index发起一个 broadcast广广广PageIndexbroadcast事件,那么按先后顺序依次接收到该事件的组件为:ComA、ComB、ComC、ComD、ComE、ComF、ComG、ComH。如下图
在这里插入图片描述
理解官方意思就是:如果通过当前组件进行$broadcast广播事件,那么就只有它的子组件能接收事件,它的父组件和兄弟组件是无法接收到消息。调用方式如下:

    this.$broadcast('eventName', param1,param2,param3,......)

    然后在子组件的events里面定义eventName接收事件就行了,如下:

    events = {

        'eventName': (param1,param2......., $event:Event) => {

            }

    }

$emit

e m i t 与 emit与 emitbroadcast正好相反,事件发起组件的所有祖先组件会依次接收到$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…);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值