通过道具Vue更改activetab

Question

我正在使用vue-cli，并且具有带有选项卡的Charts组件。我想基于在侧边栏中打开模式来更改活动标签。

<a>
      <div v-if="showModal">
        <div class="overlay" @click.self="showModal = false;">
         <Charts :activetab=1></Charts>
        </div>  
          <span @click="showModal = !showModal;" >
           {{ showModal ? "Close" : "Options"}} 
          </span>
      </div>
</a>

<a>  
      <div v-if="showModal">
        <div class="overlay" @click.self="showModal = false;">
            <Charts :activetab=2></Charts>
        </div>
        <span @click="showModal = !showModal;">
          {{ showModal ? "Close" : "Settings" }} 
        </span>
  </div>
</a>


<script>
data () {
    return {
      activetab: '',

我将activetab作为道具传递给Charts组件，但是当我在侧边栏菜单中单击“选项”时，即使将其设置为= 1，它也默认为activetab = 2。 任何想法将不胜感激，谢谢！

更新

设置activetab的图表组件：

<div class="tabs">
        <a v-on:click="activetab=1" v-bind:class="[ activetab === 1 ? 'active' : '' ]">Options</a>
        <a v-on:click="activetab=2" v-bind:class="[ activetab === 2 ? 'active' : '' ]">Settings</a>
    </div>
    
   
<div class="content">
        <div v-if="activetab === 1" class="tabcontent">
           <Options></Options>
        </div>
        <div v-if="activetab === 2" class="tabcontent">
            <Settings></Settings>
        </div>

<script>
export default {
  props:['activetab'],
  

编辑

我使用子组件的emit更新，但只显示了所有组件的最后一个活动标签。

子组件：

methods: {

    updateActive1() {
      this.$emit('updateActive1', 1)
    },
     updateActive2() {
      this.$emit('updateActive2', 2)
    },
  },
  mounted()
  {
    this.updateActive1()
    this.updateActive2()
  },

父母：

<a>  
 <Charts :activetab=activetab @updateActive1="newActive1($event)"></Charts>
</a>
<a>    
  <Charts :activetab=activetab  @updateActive2="newActive2($event)"></Charts>
</a>


<script>
methods:{
    newActive1: function(event1) {
        this.activetab = event1; 
    },newActive2: function(event2) {
        this.activetab = event2;
    },
}

似乎只有newActive2可以同时运行。

已修复

我在newActive()标记中添加了<a>，现在可以正常使用了！

<a @click="newActive(2)"> 
<Charts :activetab=activetab></Charts>