wepyアプレットフレームワークでのイベントの使用

注：以下の赤いテキストでマークされた位置は、イベントの使用シナリオを強調しています

コンポーネントの通信と相互作用

wepy.component基底クラス$broadcast、$emit、$invoke次のようなコンポーネント間の通信との相互作用のための3つの方法、

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

コンポーネント間の通信および相互作用イベントを監視するためのイベントハンドラー関数はevents、次のように、コンポーネントおよびページのオブジェクトに記述する必要があります。

import wepy from 'wepy'

export default class Com extends wepy.component {
    components = {};

    data = {};

    methods = {};

    // events对象中所声明的函数为用于监听组件之间的通信与交互事件的事件处理函数
    events = {
        'some-event': (p1, p2, p3, $event) => {
               console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`);
        }
    };
    // Other properties
}

$ broadcast

$broadcastイベントは親コンポーネントによって開始され、イベントが手動でキャンセルされない限り、すべての子コンポーネントがこのブロードキャストイベントを受け取ります。イベントブロードキャストの順序は幅優先の検索順序です。上の図に示すように、ページPage_Indexが$broadcastイベントを開始する場合、イベントを順番に受信するコンポーネントは、ComA、ComB、ComC、ComD、ComE、ComF、ComG、ComHです。以下に示すように：

$ emit

$emitそして$broadcast逆に、アセンブリのすべての構成要素の先祖によって開始されたイベントは順番に受信されます$emitイベントを。コンポーネントComEが$emitイベントを開始する場合、イベントを受信する順序は次のとおりです。コンポーネントComA、ページPage_Index。以下に示すように：

$ invoke

$invokeページまたはコンポーネントは、別のコンポーネントのメソッドを直接呼び出し、コンポーネントパスを渡して対応するコンポーネントを見つけ、そのメソッドを呼び出します。

たとえば、ページでPage_IndexコンポーネントComAのメソッドを呼び出すとします。

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

コンポーネントComAでコンポーネントComGのメソッドを呼び出す場合：

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

コンポーネントカスタムイベントハンドラー関数

1.4.8新規

次の.userような修飾子を使用して、イベントをカスタムコンポーネントにバインドできます。@customEvent.user="myFn"

このうち、@はイベント修飾子をcustomEvent 示し、イベント名を.user示し、イベントサフィックスを示します。

現在、3つのイベントサフィックスがあります。

• .default：小さなプログラムバブリングイベントをバインドします。たとえばbindtap、.defaultサフィックスは記述せずに省略できます。

• .stop：バインディングアプレットキャプチャタイプのイベントcatchtap。

• .user：$emitトリガーされるユーザー定義コンポーネントイベントをバインドします。カスタムイベントを使用する場合、イベント内の対応する監視機能は実行されないことに注意してください。

次に例を示します。

// index.wpy

<template>
    <child @childFn.user="parentFn"></child>
</template>

<script>
    import wepy from 'wepy'
    import Child from '../components/child'

    export default class Index extends wepy.page {
        components = {
            child: Child
        }

        methods = {
            parentFn (num, evt) {
                console.log('parent received emit event, number is: ' + num)
            }
        }
    }
</script>


// child.wpy

<template>
    <view @tap="tap">Click me</view>
</template>

<script>
    import wepy from 'wepy'

    export default class Child extends wepy.component {
        methods = {
            tap () {
                console.log('child is clicked')
                this.$emit('childFn', 100)
            }
        }
    }
</script>