event-handling - svelte：如何在我自己的组件中使用事件修饰符

Question

我想开发自己的 Button 组件并能够处理事件修饰符，如下所示：

<MyButton on:click|preventDefault={handler}>Click me</MyButton>

但我收到以下错误：

Event modifiers other than 'once' can only be used on DOM elementssvelte(invalid-event-modifier)

在 MyButton 我可以像这样传递 on:click 事件：

<button on:click|preventDefault>
  <slot />
</button>

但是如果没有 preventDefault，我将无法使用 MyButton

因此，另一种选择是可选地传递事件修饰符，以执行以下操作：

<MyButton preventDefault on:click={handler}>Click me</MyButton>

然后在 MyButton.svelte 中像这样（我知道这不起作用）以选择性地应用事件修饰符。

<script>
  export let prevenDefault=false
</script>

<button on:click|{preventDefault ? 'preventDefault' : ''}={handler}>Click me</MyButton>

关于如何处理它的任何想法？

标签： event-handlingsvelte

Answer 1

我认为有两种适用的方法：

1. 防止事件回调中的默认值（更简单的方法）
2. 通过传入一个道具来防止默认（你的建议）

防止事件回调中的默认值

优点	缺点
更容易和更清洁地实施	组件的消费者Event#preventDefault必须强制调用

为了进行设置，您需要两件事。

1. <Button>要转发其事件的组件：

<script>
  // Button.svelte
</script>

<!-- Note that we're not providing any callback, which forwards it -->
<button on:click>
  <slot />
</button>

2. 要调用Event#preventDefault事件的父组件：

<script>
  // App.svelte

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

<Button
  on:click={(event) => {
    event.preventDefault();

    // your code here
  }}
>
  Click Me!
</Button>

通过传入一个道具来防止违约

优点	缺点
以声明方式添加事件修饰符	组件的消费者Event将从CustomEvent#detail

您还需要在这里做两件事。

1. 在标签<Button>中手动添加其回调的组件<script>

<script>
  // Button.svelte

  import {
    onMount,
    onDestroy,
    createEventDispatcher,
  } from 'svelte';

  export let preventDefault = false;

  let button;
  const dispatch = createEventDispatcher();

  onMount(() => {
    button.addEventListener('click', onClick);
  });

  onDestroy(() => {
    button.removeEventListener('click', onClick);
  });

  function onClick(event) {
    if (preventDefault) event.preventDefault();

    dispatch('click', event);
  }
</script>

<button bind:this={button}>
  <slot />
</button>

2. preventDefault要传入prop的父组件

<script>
  // App.svelte

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

<Button
  preventDefault
  on:click={({ detail: event }) => {
    // your code here
  })
>
  Click me!
</Button>