Svelte组件切换顶部导航时默认选中首个子导航标签的方法

问题原因 #

你设置$_subTabSelect = 1未生效，核心原因是子组件LandingSubNav.svelte的选中状态未与父组件的$_subTabSelect同步，或是子组件内部维护了独立的选中状态，导致父组件的赋值无法触发子组件的状态更新。

具体解决步骤 #

1. 绑定父子组件的状态 #

在Landing.svelte中渲染LandingSubNav时，通过双向绑定传递$_subTabSelect：

<LandingSubNav bind:subTabSelect={$_subTabSelect} />

同时在LandingSubNav.svelte中导出对应的props：

export let subTabSelect;

2. 让子组件响应父组件状态变化 #

如果子组件内部有独立的选中状态变量（比如let selected = ...），添加反应式语句监听subTabSelect的变化并同步更新：

$: if (subTabSelect) {
  selected = subTabSelect;
}

这样父组件设置$_subTabSelect = 1时，子组件会自动将选中状态切换到第一个子导航项。

3. 确认点击事件的执行顺序 #

如果handleClick包含异步操作或修改状态的逻辑，确保$_subTabSelect = 1在正确时机执行。比如handleClick是异步函数时，需等待其完成后再赋值：

on:click={async () => {
  await handleClick("statewide");
  $_tabSelect = "statewide";
  $_subTabSelect = 1;
}}

验证调整 #

完成上述修改后，点击顶部导航按钮时，$_subTabSelect的赋值会同步到子组件，自动选中对应分类下的第一个子导航项。

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