Svelte自定义Select组件事件传递：on:change与onchange用法解析

onchange 和 on:change 的使用场景 #

• onchange：原生HTML DOM事件写法，只能用在<select>、<input>这类原生DOM元素上，比如你子组件里的<select onchange={emitChange}>就是正确用法。
• on:change：Svelte框架的事件监听语法，专门用于监听自定义组件发射的事件，必须用在父组件调用自定义组件时。

1. 修复父组件调用代码 #

你当前父组件用onchange触发TS警告，原因是自定义Select组件的props里没有这个属性。直接改成Svelte标准的事件监听语法on:change：

<Select
  bind:value={item[col]}
  options={columnTypes[col].options}
  on:change={(e) => handleCellChange(item, col, e.detail)}
/>

提示：子组件发射的change事件携带了选中值存在e.detail里，直接用这个值能避免响应式延迟，比依赖item[col]更可靠。

2. 优化子组件事件逻辑（可选但更规范） #

子组件已经用了bind:value绑定选中值，没必要再从DOM元素里取值，直接简化emitChange函数：

<script lang="ts">
  import { cn } from '$lib/utils';

  let {
    label,
    value = $bindable(),
    name,
    options = [],
    required = false,
    disabled = false,
    error = '',
    extraStyles = ''
  }: {
    label?: string;
    value?: string;
    name?: string;
    options?: Array<{ id: string; name: string; code: string }>;
    required?: boolean;
    disabled?: boolean;
    error?: string;
    extraStyles?: string;
  } = $props();

  function emitChange() {
    dispatchEvent(new CustomEvent('change', { detail: value }));
  }
</script>

<!-- 原生select的onchange直接调用简化后的emitChange -->
<select
  id={name}
  name={name}
  bind:value
  onchange={emitChange}
  class={cn(
    'w-full rounded-xl border border-brand-300 bg-white/50 px-4 py-2.5',
    'font-inter text-brand-700 placeholder:text-brand-400/70',
    'transition-all duration-300',
    'hover:border-purple-600',
    'focus:border-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600/20',
    'disabled:cursor-not-allowed disabled:opacity-50',
    extraStyles,
    error && 'border-error-500',
    disabled && 'bg-gray-100'
  )}
  {disabled}
  {required}
>
  <option disabled value="" selected={value === ''}>
    Select an option
  </option>
  {#each options as option}
  <option value={option.id}>
    {option.name}
  </option>      
  {/each}
</select>

3. 报错原因说明 #

TS警告"onchange" does not exist in type '$$ComponentProps'是因为：自定义组件的props定义里没有onchange这个属性，父组件传递该属性不符合类型检查规则。而Svelte的on:事件名属于框架层面的事件监听机制，不属于props范畴，所以不会触发类型错误。

内容的提问来源于stack exchange，提问作者Juan Jose Rios