Search code examples
componentsstatesvelteslot

how to share state between multi slots and their parents in svelte

I want to create an accordion collapse UI component with svelte, and implement like this:

<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>

And look like this:

enter image description here

When we change the value of collapse's activeItem prop, the collapse-item with the same value of the name props will expand.

But it is really hard for me to make an approach to let the collapse-item know the value of prop activeItem of their parent collapse component.

I can also add an activeItem prop on collapse-item like this:

<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>

But this kinds of approach is not so elegant.

I really need some suggestion on this kinds of situation.

Solution

  • You can set a store (a store is an object that allows reactive access to a value via a simple store contract) in context, The context is then available to children of the component (including slotted content).