阅读(1723) (10)

wepy 组件通信与交互

2017-06-17 15:54:07 更新

wepy.component基类提供三个方法$broadcast,$emit,$invoke,因此任一页面或任一组件都可以调用上述三种方法实现通信与交互,如:

$this.$emit('some-event', 1, 2, 3, 4);

组件的事件监听需要写在events属性下,如:

import wepy form 'wepy';
export default class Com extends wepy.component {

    components = {};

    data = {};
    methods = {};

    events = {
        'some-event': ($event, ...args) {
               console.log(`${this.name} receive ${$event.name} from ${$event.source.name}`);
        }
    };
    // Other properties
}
  1. $broadcast$broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消。事件广播的顺序为广度优先搜索顺序,如上图,如果Page_Index发起一个$broadcast事件,那么接收到事件的先后顺序为:A, B, C, D, E, F, G, H。如下图:

  1. $emit$emit与$broadcast正好相反,事件发起组件的父组件会依次接收到$emit事件,如上图,如果E发起一个$emit事件,那么接收到事件的先后顺序为:A, Page_Index。如下图:

  1. $invoke$invoke是一个组件对另一个组件的直接调用,通过传入的组件路径找到相应组件,然后再调用其方法。

如果想在Page_Index中调用组件A的某个方法:

this.$invoke('ComA', 'someMethod', 'someArgs');

如果想在组件A中调用组件G的某个方法:

this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');