如何在自定义Svelte组件中嵌套Svelecte并实现Props与事件的完整转发及双向绑定

我来帮你搞定这个封装Svelecte组件时遇到的双向绑定问题，同时实现完整的Props转发和事件透传。

问题原因分析 #

你当前的代码里，虽然用了{...$$props}传递Props，但双向绑定失效的核心原因是：

• Svelte的bind:value需要子组件显式导出对应的Prop才能建立双向绑定的通道，仅靠$$props传递是单向的，无法将内部组件的变化同步回父组件。
• 没有处理事件的透传，父组件无法接收Svelecte触发的各类事件。

解决方案 #

修改你的Select.svelte组件，通过以下三步实现完整的封装：

1. 显式导出双向绑定所需的value Prop：让父组件的bind:value能正确关联到子组件内部的状态。
2. 使用$$restProps传递剩余Props：避免重复传递已显式导出的Props（如value、label），自动转发其他所有Props给Svelecte。
3. 用on:*实现事件全透传：无需手动逐个声明事件，自动将Svelecte的所有事件转发给父组件。

修改后的Select.svelte代码：

<script>
 import Svelecte from 'svelecte';
 // 显式导出双向绑定的value，父组件的bind:value才能生效
 export let value;
 export let label;
 let id = (Math.random() + 1).toString(36).substring(7);
</script>

<label for="{id}">{label}</label>
<Svelecte 
  {...$$restProps} 
  inputId={id} 
  bind:value  <!-- 绑定内部组件的value到我们导出的value，实现双向同步 -->
  on:*         <!-- 透传所有Svelecte的事件给父组件 -->
/>

为什么这样能工作？ #

• 双向绑定：通过export let value和bind:value，Svelte会自动处理value的同步——当Svelecte内部选中值变化时，会更新子组件的value，进而同步到父组件的myValue；反之父组件修改myValue也会同步到内部的Svelecte。
• Props转发：$$restProps包含所有未被显式导出的Props（比如你的options），确保所有Svelecte支持的Props都能被正确传递，同时不会重复传递value和label。
• 事件透传：on:*是Svelte的语法糖，会监听Svelecte触发的所有事件（比如change、open、close等），并原样转发给父组件，父组件可以像直接使用Svelecte一样监听这些事件。

验证效果 #

你的App.svelte代码不需要任何修改，现在bind:value={myValue}会正常工作，选中项的数据会实时同步到myValue，同时你也可以在父组件中监听Svelecte的事件，比如：

<Select 
  options={list} 
  bind:value={myValue} 
  label="Country"
  on:change={(e) => console.log('选中变化:', e.detail)}
/>

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