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

问题描述

问 题

如下伪代码

<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呢？
求助给个思路。

解决方案

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

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

这篇关于javascript - vue2中如何实现广播机制？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！