如何在多个插槽与其父母之间共享状态

我想用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>

但是这种方法并不那么优雅。

对于这种情况，我确实需要一些建议。