Estoy creando algunos componentes personalizados en svelte y no entendía cómo pasar eventos como accesorios como on:click, on:mouseup, on:whatever, lo intenté de la siguiente manera pero no funcionó:
// button.svelte // OnClick it's a prop but in this way, I need to pass every single event manually <div on:click={OnClick} ></div>o
// button.svelte // I tried even in this way but it didn't really work <div {...$$restProps} {...$$props} ></div>La jerarquía es Aplicación => Exterior => Interior
aplicación:
<script> import Outer from './Outer.svelte'; function handleMessage(event) { alert(event.detail.text); } </script> <Outer on:message={handleMessage}/>Exterior:
<script> import Inner from './Inner.svelte'; </script> <Inner on:message />Interno:
<script> import { createEventDispatcher } from 'svelte'; const dispatch = createEventDispatcher(); function sayHello() { dispatch('message', { text: 'Hello!' }); } </script> <button on:click={sayHello}> Click to say hello </button>Ahora, esto para mí es un evento burbujeante. Si está tratando de hacerlo de manera inversa ... no estoy tan seguro de que pueda lograrlo. Los datos se transmiten, los eventos brotan.
Cuando se trata de intentar enviar todos los eventos de una sola vez, parece haber este problema de github esbelto creado para permitir la sintaxis on:* . Lamentablemente aún no está implementado.