Прослушивание отправленного события из компонента Svelte - PullRequest
Новая
       113

Прослушивание отправленного события из компонента Svelte

0 голосов
/ 27 апреля 2020

Я ищу способ прослушивания отправленного события из компонента Svelte в другом компоненте из JavaScript (а не из синтаксиса on:).

Здесь это код, который я пытаюсь получить в REPL.

Ожидаемое поведение будет состоять в том, чтобы 0 отображалось в консоли при нажатии кнопки Закрыть 0 , и и так далее для других.

1 Ответ

2 голосов
/ 27 апреля 2020

Я немного покопался в скомпилированном коде svelte и нашел решение для прослушивания обработанного события svelte, но это не очень красиво:)

Вы можете (и должны) отправлять свое собственное событие при вызове onClose, но вот решение:

на Nested.svelte 

<script context="module">
    let counter = 0
</script>

<script>
    import { createEventDispatcher, onMount } from 'svelte';
    // add this
    import { get_current_component } from 'svelte/internal'; 
    let _this;
    const id = counter++
  const dispatch = createEventDispatcher()
    /*********
     and add this reactive statement
    **********/
    $: {
        if (_this){
            _this.parentNode.hosts = (_this.parentNode.hosts || []);
            _this.parentNode.hosts.push(get_current_component());
        }
    } 
    /*********
     end
    **********/
    function onClose() {
        dispatch('close', id)
    }
</script>
<!-- bind this -->
<button bind:this={_this} class='nested-button' on:click={onClose}>
    Close {id}
</button>

Затем в вашем App.svelte 

<script>
    import { onMount } from 'svelte'
    import Nested from './Nested.svelte'

    let element

    onMount(() => {
        // requestAnimationFrame is required!
        requestAnimationFrame(() => element.hosts.forEach(nestedButton => {
        nestedButton.$on('close', (e) => {
                console.log(e.detail)
            })
        }));
    })
</script>

<ul bind:this={element}>
    <Nested/>
    <Nested  />
    <Nested />
</ul>

Объяснение -

единственный способ привязаться к событию svelte - получить ссылку на вызывающий компонент и вызвать метод $on, но в настоящее время нет простого способа получить ссылку на компонент.

, поэтому я сделал это вызов внутреннего svelte get_current_component, который вернет текущий компонент (но по какой-то причине не будет работать при вызове внутри onMount).

Я добавил ссылку на parentNode.hosts самого верхнего элемент в компоненте, который в данном случае является элементом ul.

, тогда вы можете просто вызвать метод $on для каждой ссылки в element.hosts.

Однако подходящее решение будет б Вы отправляете свое собственное событие следующим образом: 

function onClose() {
        dispatch('close', id)
        this.dispatchEvent(new CustomEvent('close', {detail: id}));
    }

И тем самым достигаете почти того же самого, не вмешиваясь во внутренности svelte

...