Блог

Я пытаюсь использовать createEventDispatcher для перехвата события дочернего компонента из родительского компонента, но, похоже, это не работает. Если я удалю пользовательский элемент, событие диспетчера сработает. Я делаю что-то не так или пользовательский элемент svelte не поддерживает событие диспетчера?

дочерний компонент Inner.svelte

 <svelte:options tag="my-inner"/>
<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();

    function sayHello() {
        dispatch('message', {
            text: 'Hello!'
        });
    }
</script>

<button on:click={sayHello}>
    Click to say hello
</button>
 

родительский компонент App.svelte

 <svelte:options tag="my-app" />
<script>
    import {} from './Inner.svelte';

    function handleMessage(event) {
        alert(event.detail.text);
    }
</script>
<my-inner on:message={handleMessage}></my-inner>
 

Мой rollup.config.js настройки

     plugins: [
        svelte({
            compilerOptions: {
                customElement: true,
                tag: null
            },
        }),
 

Это известная проблема. По крайней мере, в версии 3.32 и ранее события не генерируются из компонента svelte, скомпилированного в пользовательский элемент.

See https://github.com/sveltejs/svelte/issues/3119

В этом потоке обсуждаются различные обходные пути, но это зависит от вашего варианта использования. Кажется, что простой выдает событие :

 import { createEventDispatcher } from 'svelte';
import { get_current_component } from 'svelte/internal';

const component = get_current_component();
const svelteDispatch = createEventDispatcher();

const dispatch = (name, detail) => {
  svelteDispatch(name, detail);
  component.dispatchEvent amp;amp; component.dispatchEvent(new CustomEvent(name, { detail }));
  // or use optional chaining (?.)
  // component?.dispatchEvent(new CustomEvent(name, { detail }));
};