svelte - Svelte：组件上下文

Question

我创建了一个自定义下拉组件。我在同一页面上有多个实例，如下所示：

label : <Select>
label : <Select>
label : <Select>

每当我点击组件时，第一个只会打开。我怎样才能解决这个问题？谢谢你。

// 选择.svelte

<div class="dropdown">
<slot></slot>
</div>

SelectItem.svelte

<Select>
 content
</Select>

items.svelte

{#each items as item}
<item />
{/each}

item.svelte

<SelectItem/>

标签： svelte

Answer 1

理想情况下，你会有这样的东西

<script>
//App.svelte
    import Select from "./Select.svelte"
    let options = [
        {label:"State 1", id:1},
        {label:"State 2", id:2}
    ]
    let country = [
        {label:"Country 1", id:1},
        {label:"Country 2", id:2}
    ]
</script>


<Select options={options}/>

<Select options={country} />

<script>
//Select.svelte
    export let options = []
</script>


<select>
        {#each options as option} 
            <option>{option.label}</option>
        {/each}
</select>

检查REPL