wepy 組件通信與交互

wepy.component基類提供三個(gè)方法$broadcast，$emit，$invoke，因此任一頁面或任一組件都可以調(diào)用上述三種方法實(shí)現(xiàn)通信與交互，如：

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

組件的事件監(jiān)聽需要寫在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事件是由父組件發(fā)起，所有子組件都會(huì)收到此廣播事件，除非事件被手動(dòng)取消。事件廣播的順序?yàn)閺V度優(yōu)先搜索順序，如上圖，如果Page_Index發(fā)起一個(gè)$broadcast事件，那么接收到事件的先后順序?yàn)椋篈, B, C, D, E, F, G, H。如下圖：

1. $emit$emit與$broadcast正好相反，事件發(fā)起組件的父組件會(huì)依次接收到$emit事件，如上圖，如果E發(fā)起一個(gè)$emit事件，那么接收到事件的先后順序?yàn)椋篈, Page_Index。如下圖：

1. $invoke$invoke是一個(gè)組件對(duì)另一個(gè)組件的直接調(diào)用，通過傳入的組件路徑找到相應(yīng)組件，然后再調(diào)用其方法。

如果想在Page_Index中調(diào)用組件A的某個(gè)方法：

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

如果想在組件A中調(diào)用組件G的某個(gè)方法：

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