4

コンポーネントを作成し、プログラムでイベント リスナーをアタッチすることは可能ですか?

<svelte:component/>これは、 を使用して広がる小道具で簡単に可能であることを知ってい{ ...props }ます。イベントリスナーをアタッチするために同様のことが達成できるのではないかと思います。

たとえば、次の例では、プログラムで および にアタッチしたいと考えていon:messageます。Aon:countB

<!-- App.svelte -->
<script>
    import A from './A.svelte';
    import B from './B.svelte';

    let message = 'Hi there ';
    let count = 0;

    const components = [{
        component: A,
        props: { message },
        listeners: { message: (m) => { console.log(`They say "${m}"`); } }
    }, {
        component: B,
        props: { count },
        listeners: { click: () => { count++; } }
    }];
</script>

{#each components as component}
    <div><svelte:component this={component.component} { ...component.props }/></div>
{/each}

<div>
    <p>They say "{message}"!</p>
    <p>They clicked {count} times!</p>
</div>

<!-- A.svelte -->
<script>
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();
    export let message = '';
    function changeHandler(e) { dispatch('message', message); }
</script>

<input on:change={changeHandler} on:value={message} value={message} />

<!-- B.svelte -->
<script>
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();
    export let count = 0;
    function clickHandler() { dispatch('count', count); }
</script>

<button on:click={clickHandler}>Click me</button>

これがライブデモです: https://svelte.dev/repl/af1bd30ab75b43f19b72a306340b7282?version=3.18.2

componentsつまり、配列を次のように拡張する方法があることを望んでいます

<A message={message} on:message={e => { message = e.detail; }}/>
<B count={count} on:count={e => { count = e.detail; }}/>
4

3 に答える 3

7

を使用$onして、コンポーネント イベントにリスナーを動的に登録できます。

あなたのユースケースでは、このコンポーネントを使用できます：

ComponentEvent.svelte

<svelte:component this={component.component} { ...component.props } bind:this={instance}/>

<script>
  export let component;

    let instance;
    
    $: if (instance && component.listeners) {
        for (let [key, listener] of Object.entries(component.listeners)) {
            instance.$on(key, listener);
        }
    }
</script>

App.svelte の各ループを次のように置き換えます。

{#each components as component}
    <ComponentEvent {component}/>
{/each}

このREPLを参照してください

于 2020-07-04T18:51:42.957 に答える
1

リスナーを動的にアタッチすることはできません。いいえ、Svelte はコンパイル済み言語であることを忘れないでください。コンパイル時にすべての面倒な作業を行うため、事前に知っておく必要があります。

動的リスナーに対して私が行ったことは、単一の既知のイベントを起動し、イベントの詳細にイベント名などの差分ロジックを含めることです。次のように:

// SomeComponent.svelte
<script>
  import { createEventDispatcher } from 'svelte'

  const dispatch = createEventDispatcher()

  dispatch('component-event', { name: 'alert', value: 'oh noes' })
  dispatch('component-event', { name: 'log', value: 'some message' })
</script>

// App.svelte
<svelte:component this={someComponent} on:component-event={e => handleEvent(e)} />

<script>
  function handleEvent ({ detail }) {
    const { name, value } = detail
    if (name === 'alert') { alert(value) }
    if (name === 'log') { console.log(value) }
  }
</script>
于 2020-02-19T09:33:03.610 に答える