vue 点击document事件，改变模板数据

Question

一个页面里面有多个选择器组件
1、要求点击其中一个的时候，另外一个选择面板收起（改变另外一个组件中的数据的值true/false）
2、要求点击页面的其他地方，收起所有的选择面板

------这个应该是怎么样的思路呢？

（第一点已解决，想知道第二点这种又要阻止事件冒泡的方式怎么处理）

Answer 1

很多种方法。例如设置一个满屏fixed透明的遮罩层，给予click事件隐藏面板，给面板的click事件最后阻止冒泡，防止触发遮罩的click事件隐藏掉。

Answer 2

在子组件的mounted中编写一个自定义事件，用来告知父组件当前的子组件显示并要求父组件隐藏其他子组件。在父组件的mounted中再绑定一个事情，用来监听当点击文档其他地方时隐藏所有子组件。
如果子组件比较多，可能父组件需要处理的事件就会变得很多，最好能用vuex进行状态管理。

Answer 3

function contains (parentEle, childEle) {
        if (parentEle) {
            if (parentEle === childEle) {
                return true;
            }
            if (parentEle && parentEle.contains) {
                return parentEle.contains(childEle);
            }
            return !!(parentEle.compareDocumentPosition(childEle) & 16);

        } else {
            return false;
        }

    }
 var contain =contains(document.getElementById('searchListValue'), e.target);
//其中一个面板的id是searchListValue，contain的true，则表示点击区域在这个面板内，然后可以隐藏另一个面板。另一个面板同理用上述contains方法