Svelte中on:keydown正确用法及标签切换失效问题排查

1. 缺少事件分发器初始化 #

你的Tabs组件中使用了dispatch方法，但未从Svelte导入并创建事件分发器，导致tabChange事件根本无法触发。

修复：在Tabs组件顶部添加脚本代码：

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  
  export let items;
  export let activeItem;
</script>

2. 父组件未正确更新activeItem状态 #

即便事件成功触发，如果父组件的tabChange函数没有更新activeItem的值，子组件的选中状态也不会变化。

父组件脚本需确保更新状态：

<script>
  import Tabs from './Tabs.svelte';
  
  let items = ['标签1', '标签2', '标签3'];
  let activeItem = items[0];
  
  function tabChange(event) {
    // 必须更新activeItem，子组件才会同步选中状态
    activeItem = event.detail;
  }
</script>

3. keydown事件逻辑过于宽泛（可选优化） #

当前代码按下任意键都会触发切换，不符合常规交互逻辑，建议只响应Enter或Space键：

on:keydown={(e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    dispatch("tabChange", item);
  }
}}

4. 可选：增强可访问性（无障碍优化） #

给li元素添加aria-selected属性，符合无障碍标准：

<li
  tabindex="0"
  aria-selected={item === activeItem}
  on:click={() => dispatch("tabChange", item)}
  on:keydown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      dispatch("tabChange", item);
    }
  }}
>

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