ตั้งค่า Active Components ที่ไม่ซ้ำใครโดยใช้ $emit ใน VueJS

ฉันมีปัญหากับการตั้งค่าส่วนประกอบที่ใช้งานเฉพาะโดยใช้ $emit ใน VueJS

ฉันต้องการเมื่อคลิกไปที่ Tab A ในส่วนประกอบของแถบแท็บ มันจะ be active in Tab A, not active in Tab B และเหมือนกันกับ Tab B

หวังว่าผู้ชายของคุณจะช่วยได้

องค์ประกอบหลัก:

<template>
  <div class="tab-a" v-if="taba = true">
    <span>This is Tab A</span>
  </div>
  <div class="tab-b" v-if="tabb = true">
    <span>This is Tab B and I want Tab A is not Active</span>
  </div>
  <tabbar @open="ToggleOpen"></tabbar>
</template>
<script>
   ToggleOpen: function (obj) {
      obj.current = true
      obj.rest = false
    },
</script>

ส่วนประกอบของแถบแท็บ:

<template>
  <div class="photo_react">
    <li @click="open({current: 'taba', rest: 'tabb'})" class="tab-a" data-tooltip="Open TabA">Open TabA</li>
    <li @click="open({current: 'tabb', rest: 'taba'})" class="tab-b" data-tooltip="Open TabB">Open TabB</li>
  </div>
</template>
<script>
export default {
  methods: {
    opencomment: function (obj) {
      this.$emit('open', obj)
    }
  }
}
</script>