如何在多个插槽及其父级之间共享状态

Question

我想用svelte创建一个手风琴折叠UI组件，并像这样实现：

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

看起来像这样：

[当我们更改collapse的activeItem prop的值时，具有相同名称props的collapse-item将展开。

但是对我来说，要使折叠项目知道其父折叠组件的prop activeItem的值确实很困难。

我也可以像这样在折叠项上添加一个activeItem道具：

<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

您可以在store中设置store（商店是允许通过简单的商店合同对值进行反应式访问的对象，然后该上下文可用于组件的子项（包括插入的内容）。] >

Answer 2

尝试转到context，并使编辑器看起来像这样：

context