Vue.js：互斥的子组件状态

Question

我有一套充满活力的孩子：

父  child1  的child2  ...  childn

我想捕捉一个孩子的onclick事件，并进行一些dom更改（展开div，更改图标），然后确保其他孩子有相反的更改（即div折叠，图标是关闭图标）。

实现这一目标的最佳vue风格是什么？

我知道如何从子项向父项发出事件，以及如何将属性附加到子项，只是不确定如何使用它们来完成任务。

Answer 1

我处理这些问题的最简单方法是使用activeIndex来跟踪哪一个是开放的。

在emit侦听器上，您更新activeIndex。

然后在您的计算中，您可以使用<child isOpen="activeIndex===3"/>

您可以获得更复杂，可扩展/可重用的功能，但可能足以满足您的需求。如果您可以发布一些代码，我可以使用更相关的示例进行更新。