Svelte: Передача событий с диспетчером против передачи в функции обработки, что является лучшей практикой? - PullRequest
Новая
       9

Svelte: Передача событий с диспетчером против передачи в функции обработки, что является лучшей практикой?

0 голосов
/ 03 мая 2020

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

Способ 1. Пересылка событий с помощью диспетчера

Inner.svelte: Использование диспетчера Svelte для отправки переупакованной версии исходного события: 

<input type="text" on:input={callDispatcher} />

const dispatcher = createEventDispatcher();

function callDispatcher(e) {
    dispatcher("mymsg", {
        foo: e.target.value
    });
}

Outer.svelte: прослушивание отправленного события Inner: 

<Inner on:mymsg={handler} />

function handler(e) {
    alert(e.detail.foo);
}

Метод 2: Передача обработчика Outer напрямую Inner

Inner.svelte: Принимает обработчик, переданный в по Outer: 

export let externalHandler;
<input type="text" on:input={externalHandler} />

Outer.svelte: Когда происходит интересующее Внутреннее событие, он вызывает обработчик Outer: 

<Inner externalHandler={handler} />

function handler(e) {
    alert(e.target.value);
}

Вопрос

Какой из них лучше практика? Диспетчер метода 1 кажется ненужным промежуточным уровнем, который не только добавляет больше кода, но и теряет исходную информацию о событии. Но, как ни странно, в учебнике Svelte упоминается метод 1 вместо метода 2.

1 Ответ

1 голос
/ 03 мая 2020

Нет реальной разницы, и вы действительно можете использовать оба. Тем не менее, метод 2 не будет работать для нативных элементов, в результате чего у вас будет сочетание обоих подходов, и вы получите код, подобный следующему: 

<Child clickHandler="{childClick}" />
<button on:click="{buttonClick}">click</button>

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

<Child on:click="{childClick}" />
<button on:click="{buttonClick}">click</button>

Дополнительный код диспетчера является компромиссом в этом.

...