как разделить состояние между несколькими слотами и их родителями в svelte

Question

Я хочу создать компонент пользовательского интерфейса в виде гармошки с помощью svelte и реализовать его так:

<collapse activeItem="1">
  <collapse-item title="标题1" name="1">代码是写出来给人看的，附带能在机器上运行</collapse-item>
  <collapse-item title="标题2" name="2">代码是写出来给人看的，附带能在机器上运行2</collapse-item>
  <collapse-item title="标题3" name="3">代码是写出来给人看的，附带能在机器上运行3</collapse-item>
</collapse>

И выглядеть так:

Когда мы изменяем значение свойства active для коллапса, элемент коллапса с тем же значением реквизита имени будет расширяться.

Но мне действительно трудно дать подход, чтобы позволитьcollapse-item знает значение prop activeItem их родительского компонента collapse.

Я также могу добавить propI activeItem для элемента collapse-item следующим образом:

<collapse activeItem="1">
  <collapse-item title="标题1" activItem="1" name="1">代码是写出来给人看的，附带能在机器上运行</collapse-item>
  <collapse-item title="标题2" activItem="1" name="2">代码是写出来给人看的，附带能在机器上运行2</collapse-item>
  <collapse-item title="标题3" activItem="1" name="3">代码是写出来给人看的，附带能在机器上运行3</collapse-item>
</collapse>

Но такой подходне так уж и элегантно.

Мне действительно нужно несколько советов по поводу подобных ситуаций.

Answer 1

Попробуйте перейти к svelte.dev и сделать редактор похожим на это:

Collapse.svelte:

<script>
    import { active } from './stores.js';
    import Item from './Item.svelte';
    const indexes = [1,2,3];
    function handleClick(e) {
        const index = Number(e.target.dataset.index);
        active.set(index === $active ? 0 : index);
    }
</script>

<ul on:click={handleClick}>
    {#each indexes as index}
        <Item index={index}/>
    {/each}
</ul>

CollapseItem.svelte:

<script>
    import { active } from './stores.js';
    export let index;
    let active_val;
    const active_unsubscribe = active.subscribe(val => active_val = val);
</script>

<style>
    .active {color: red}
</style>

<li class:active={index === active_val} data-index={index}>Number {index}</li>

stores.js:

import { writable } from 'svelte/store';
export const active = writable();

Надеюсь, это даст вам некоторое представление о том, что делать!

Answer 2

Вы можете установить store (хранилище - это объект, который разрешает реактивный доступ к значению через простой договор хранилища) в context, тогда контекстДоступно для дочерних компонентов компонента (включая содержимое в слотах).