Vue阻止事件冒泡-实现点击div以外区域隐藏该div区域

js中存在事件冒泡，当点击clickSetting时，stopEvent和showSetting事件也会按顺序从内到外依次触发，通过stopEvent可以阻止事件继续冒泡，所以showSetting不会再出发，stopEvent内部可以自由处理业务逻辑。当点击stopEvent区域之外时，就会触发showSetting事件，此时clickSetting就被隐藏了。

<template>
    <div class="box" @click="showSetting">
        <div class="settingCon" @click="stopEvent($event)">
            <div v-show="showSettingCon" @click="clickSetting">现实隐藏区域</div>
        </div>
    </div>
</template>

showSetting(){
     this.$set(this, 'showSettingCon', false);
     //全局区域内点击时showSettingCon均为false
 },
 stopEvent(event){
     event.stopPropagation(); //此区域不受上面方法的影响
 },
 clickSetting(){
     //此处处理业务逻辑
 }