vue让相同组件只显示一个

常用的有单例模式，也可以采用组件间通信的方法

如下

<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>