Svelte、EventDispatcher 或作为值的函数？用什么？

Question

阅读这个令人惊叹的模态示例的代码：https://svelte.dev/examples#modal 我试图了解 performances/bundle size/other 的区别是什么，如果我使用：

createEventDispatcher() 指令如 on:close={()=> doSomething()} 或
只需将函数作为值传递，如 action={doSomething}.

同样在第一种情况下，我不能在 slot 上使用 on:close={...}，对吗？

如果我尝试它会给我这个错误：[!] (plugin svelte) ValidationError: <slot> cannot have directives

你推荐使用什么？

Answer 1

传递回调是最直接的。光。简单的。在大多数情况下，回调可以做到，IMO 他们更可取。

不过，您只能传递一个回调，而同一事件可以有多个侦听器。

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

    let beeper

    onMount(() => {
        const disposes = [
            beeper.$on('beep', () => console.log('dynamic A')),
            beeper.$on('beep', () => console.log('dynamic B'))
        ]
        return () => disposes.forEach(fn => fn())
    })
</script>

<Beeper on:beep={() => console.log('inline')} bind:this={beeper} />

独立组件可能更有趣？

const beeper = new Beeper({ target: document.body })
beeper.$on('beep', ...)
beeper.$on('beep', ...)

事件也可以更容易代理：

Proxy.svelte

<script>
  import Beeper from './Beeper.svelte'
</script>

<Beeper on:beep />

App.svelte

<script>
  import Proxy from './Proxy.svelte'
</script>

<Proxy on:beep={() => console.log('beep')} />

另一方面，事件可能会给代理带来麻烦：

Proxy.svelte

<script>
  import Beeper from './Beeper.svelte'
</script>

<!-- callbacks are all in the $$props bag, but I have to know every
     event that I want to proxy -->
<Beeper {...$$props} on:beep />

而且他们甚至可以说更容易代理：

<script>
  import Beeper from './Beeper.svelte'

  export let onBeep
</script>

<Beeper {onBeep} />

此外，我不确定您是否可以使用 Svelte 的自定义元素风格进行回调，因此您可能会遇到事件。

在某些情况下，出于一致性（尤其是当您的组件非常模仿现有的 DOM 元素）、优雅或美观的原因，您可能更喜欢事件 API。

就我个人而言，除非回调不起作用，否则我通常只使用回调。这种情况很少见。

啊！不，您不能在广告位上举办活动。但是你也不能真的有回调，是吗？

<slot onBeep={onBeep} />

这将使 onBeep 函数在消费者组件中作为 let:onBeep 可用：

<SlotBeeper let:onBeep>
  {@debug onBeep}
  <AnotherCmp {onBeep} />
</SlotBeeper>

Svelte、EventDispatcher 或作为值的函数？用什么？

Svelte, EventDispatcher or function as a value? What to use?

javascript

events

event-handling

svelte

svelte-3