Svelte - пересылка события из сценария компонента

Мне было интересно, как перенаправить событие из функции с помощью Svelte.

Например, у меня есть файлы App.svelte и Component.svelte. Component.svelte - компонент кнопки. Я хочу обработать событие on: click следующим образом:

<script>
   function handle(e){ /** Do things */ -  /** Forward Event */ }
</script>

<button on:click={handle}/>

Так что я также могу получить событие из файла App.svelte

<script>
   import Button from './component.svelte'

   function handle(e){ /** Do something */ }
</script>

<div>
   <Button on:click={handle}/>
</div>

Я знаю, что вы можете пересылать события внутри файла component.svelte, просто заполнив атрибут on: click без указания функции для вызова. Но в моем случае мне нужна внутренняя логика внутри моего компонента. Или мне действительно нужно создать для этого собственный обработчик событий?

Спасибо за помощь :)


svelte svelte-3 svelte-component
person Tryall Allombria    schedule 10.10.2020    source источник

Ответы (3)


arrow_upward
3
arrow_downward

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

Нет, вам не нужно настраиваемое событие, если щелчок - это все, что вы хотите прослушать, но вы хотите выполнить логику внутри компонента и передать щелчок родительскому элементу.

Svelte позволяет добавлять сколько угодно щелчков на: click. Таким образом, один из on: clicks может быть пустым и передавать обработчик кликов родительскому объекту, а другой может обрабатывать внутреннюю функцию / логику для компонента.

<button on:click={internalFunction} on:click>Something</button>

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

person JHeth    schedule 10.10.2020

arrow_upward
1
arrow_downward

Не уверен, что правильно понял. Вы можете обработать свою собственную логику в своей функции, а затем просто отправить click вперед.

В вашем компоненте:

<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()
  function handle(e){
    console.log(”comp”)
    dispatch('click', e)
  }
</script>
<button on:click={handle}>test</button>
person grohjy    schedule 10.10.2020
comment
Я понимаю, могу ли я автоматически пересылать необработанные события? Я хочу иметь возможность получать любые события из моего файла App.svelte без записи on: click, on: mouseenter, on: mouseleave и т. Д. Внутри моего файла component.svelte - person Tryall Allombria; 10.10.2020

arrow_upward
1
arrow_downward

Вам нужен createEventDispatcher, который позволяет запускать события «вручную». Итак, что бы вы сделали:

import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();

function handle(e) {
 // do stuff
 dispatch('my-event', data);
}

Теперь вы можете прослушивать это событие, используя on:my-event (обратите внимание, что это вполне может быть on: click или что-то еще), data, переданный в это событие, может быть доступен как ev.detail

person Stephane Vanraes    schedule 10.10.2020
comment
Я понимаю, могу ли я автоматически пересылать необработанные события? Я хочу иметь возможность получать любые события из моего файла App.svelte без записи on: click, on: mouseenter, on: mouseleave и т. Д. Внутри моего файла component.svelte - person Tryall Allombria; 10.10.2020
comment
Нет, в настоящее время это невозможно - person Stephane Vanraes; 10.10.2020