有个需求,点击一个元素,让弹出框显示,点击弹出框以外的区域,就关闭弹出框,如下代码所示。
但是这样有个问题,就是当弹出框显示以后,点击弹出框的区域也会触发父元素的点击事件,使得ifshow=false
<view @click="ifshow=false"><view @click="ifshow=true">点击显示弹出框</view><view v-if="ifshow">弹出框</view>
</view>
解决方法: 在子组件事件加个修饰stop
,就会相互隔绝父子事件
<view @click="ifshow=false"><view @click.stop="ifshow=true">点击显示弹出框</view><view v-if="ifshow">弹出框</view>
</view>