常用的有单例模式,也可以采用组件间通信的方法
如下
<template>
<div >
<div @click="showComponent">
</div>
<div class="x-class" v-show="show">
</div>
</div>
</template>
<script>
import Vue from "vue";
var Event = new Vue(); //定义一个空的Vue实例
export default {
name: "XXX",
data() {
return {
show: false
};
},
mounted() {
let self = this;
Event.$on("XXX-closeAll", self.hideSelect); //监听到某个组件要求关闭的事件,事件名称自定义
},
props: {
},
methods: {
hideSelect(){
let self = this;
self.show = false;
},
showComponent() {
let self = this;
let showStore = self.show;
Event.$emit("XXX-closeAll"); //通知其他各组件关闭
if (showStore) { //之前是已经打开的
self.show = false;
} else {
self.show = true;
}
}
}
};
</script>