1.点击组件外的其他位置或者其他组件,当前打开的弹窗关闭
这个问题发生的情境是这样:在父组件中引用了很多子组件(有单个的组件,还有由孙组件循环生成的子组件),子组件会有点击出现的菜单栏。如果点击其中一个子/孙组件,使其出现下拉菜单,那么其他已打开的下拉菜单自动收起;点击非出现下拉菜单的位置,已展开的菜单也要自动收起。
解决方案:在父组件的包裹元素上加一个函数,引用子组件的时候记得起名字(ref),子组件可以利用这个函数给父组件通信,告诉父组件点我的时候关闭其他。代码示意如下:
子组件:
<sonA
ref="sonA"
@closeOtherMenu = "closeOtherMenu($event)">
</sonA>
closeOtherMenu(value) {
this.$emit('closeOtherMenu', value);
},
父组件:
<template>
<div class="father" @click="closeMenu">
<sonA ref='firstSon'></sonA>
<sonB ref='secondSon'></sonB>
</div>
</template>
closeMenu() {
if (this.$refs.firstSon) {
this.$refs.firstSon.closeMenu(