javascript - vue2中如何实现广播机制？

Question

如下伪代码

<l1 id="1">
    <l2></l2>
    <l2></l2>
</l1>
<l1 id="2">
    <l2></l2>
    <l2></l2>
</l1>
<l1 id="3">
    <l2></l2>
    <l2></l2>
</l1>

初始时“l1”均处于闭合状态，通过对l1绑定click事件，可以控制展开/关闭自身。
但如何实现展开自身的同时关闭其他“l1”呢？
求助给个思路。

Answer 1

用不着广播，仔细从数据驱动的角度来考虑，用一个数据 curIdx 表示当前展开的组件，那么可以通过下面的类绑定来实现你所要的展开折叠状态控制：

<l1 v-for="(item, idx) in items" :class="curIdx === idx ? 'expanded' : 'collapsed'" @click="curIdx = idx">
  <l2></l2>
</l1>