4

「detail」オブジェクトを介してカスタム イベント プロパティにアクセスする必要があるのはなぜですか?

function handleMessage(event) {

    alert(event.detail.text); // why do we need to access 'text' property from 'detail' object?

}



// In the Child component, we are using this function to dispatch the custom event with some data.

    function sayHello() {
        dispatch('message', {
            text: 'Hello!'  // we are not wrapping the data into the 'detail' object
        });
    }

サンプルコードはこちら

4

1 に答える 1

3

これは、dispatch が DOM CustomEvent オブジェクトの単なるラッパーであるためです。これは、洗練されたレポからディスパッチ関数を返すコードです。

export function createEventDispatcher() {
    const component = get_current_component();

    return (type: string, detail?: any) => {
        const callbacks = component.$$.callbacks[type];

        if (callbacks) {
            // TODO are there situations where events could be dispatched
            // in a server (non-DOM) environment?
            const event = custom_event(type, detail);
            callbacks.slice().forEach(fn => {
                fn.call(component, event);
            });
        }
    };
}

以下の関数でわかるように、detail という名前の 2 番目の引数を取るシグネチャがあり、2 番目のパラメータとして渡すものは常に detail になります。そのJavaScriptのもの。

export function custom_event<T=any>(type: string, detail?: T) {
    const e: CustomEvent<T> = document.createEvent('CustomEvent');
    e.initCustomEvent(type, false, false, detail);
    return e;
}
于 2019-12-17T11:35:10.507 に答える