zoukankan      html  css  js  c++  java
  • 微信小程序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
    來源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
  • 相关阅读:
    uniapp 画圆形或多边形雷达图
    uniApp开发之公用配置文件common.js
    FastAdmin 表格排序
    fastadmin SelectPage field显示多个字段
    PHP装饰器模式
    PHP原型模式,(理解:创建并初始化对象,再复制一个对象避免重复初始化)
    PHP设计模式-观察者模式
    为什么 echo 3 . print(2) . print(4) . 5 . 'c'的结果是45c2131
    PHP数组式访问接口ArrayAccess用法分析
    浏览器兼容性问题总结
  • 原文地址:https://www.cnblogs.com/linghu-java/p/9237487.html
Copyright © 2011-2022 走看看