Svelte：組件上下文

Question

我創建了一個自定義下拉組件。 我在同一頁面上有多個實例，如下所示：

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

每當我點擊組件時，第一個只會打開。 我怎樣才能解決這個問題？ 謝謝你。

// Select.svelte

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

SelectItem.svelte

<Select>
 content
</Select>

items.svelte

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

item.svelte

<SelectItem/>

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