时间戳

首页 > 解决方案 > Svelte：以可重用的方式关联标签和输入

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

问题描述

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

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

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

有没有办法在 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>

标签： htmldomsveltesvelte-3

解决方案

您可以在模块上下文中定义一个计数器，然后使用它来创建唯一 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>

App.svelte

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

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

见REPL

推荐阅读