Svelte：以可重用的方式关联标签和输入

我正在构建一个 Svelte 输入组件，该组件应该在同一页面上多次使用。

<div>
    <label>{label}</label>
    <div>
        <input bind:value>
        <!-- some more elements -->
    </div>
</div>

尝试关联标签和输入我遇到以下问题：

• 我无法通过更改外部来使用隐式关联<div> to <label>，因为输入不是直接子项。
• 我无法使用标签for属性，因为重用该元素会创建多个相同的 id。

有没有办法在 Svelte 中创建组件实例唯一 id（前置或后置），或者是否有其他解决方案来解决此问题。

或者手动设置随机字符串作为 id 是最好的解决方案吗？

<script>
    const id = random_string();
    /* ... */
</script>

<div>
    <label for={id}>{label}</label>
    <div>
        <input {id} bind:value>
        <!-- some more elements -->
    </div>
</div>

您可以在模块上下文中定义一个计数器，然后使用它来创建唯一的 ID

输入.svelte

<script context="module">
    let counter = 0
</script>
<script>
        export let label
        let value
        let eltId = 'input_'+ counter++
</script>

<div>
    <label for={eltId}>{label}</label>
    <div>
        <input id={eltId} bind:value>
    </div>
</div>    

应用程序.svelte

<script>
    import Input from './Input.svelte'
</script>

<Input label='Select Country' />
<Input label='Select Country' />
<Input label='Select Country' />

See REPL https://svelte.dev/repl/5e0255a5fa7b4fb59e7ef8e83c7e4a82?version=3.32.0