Svelte组件内外on:blur事件回调能否同时执行？

在Svelte中，子组件内部DOM元素绑定的事件默认不会自动触发组件本身的同名事件，可通过以下两种方式实现两个回调同时执行：

方法1：手动派发组件级blur事件 #

在子组件的input blur回调中，执行完自身逻辑后，手动触发组件的blur事件，让父组件绑定的回调得以执行。

CustomInput.svelte

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

  function handleInputBlur() {
    console.log(1);
    // 手动派发组件的blur事件
    dispatch('blur');
  }
</script>

<input on:blur={handleInputBlur} />

App.svelte

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

  function handleComponentBlur() {
    console.log(2);
  }
</script>

<CustomInput on:blur={handleComponentBlur} />

方法2：自动转发DOM事件到组件 #

通过forwardEventsToDom选项，让子组件自动将内部DOM元素的事件转发到组件本身，无需手动派发。

CustomInput.svelte

<svelte:options forwardEventsToDom />

<script>
  function handleInputBlur() {
    console.log(1);
  }
</script>

<input on:blur={handleInputBlur} />

App.svelte代码与方法1一致。

两种方法对比 #

• 方法1更灵活，可自定义事件触发时机，还能通过dispatch传递额外参数（如dispatch('blur', { value: input.value })）；
• 方法2更简洁，适合需要转发多个DOM事件的场景，无需逐个手动派发。

内容的提问来源于stack exchange，提问作者Faniel