Установите уникальные активные компоненты, используя $emit в VueJS

У меня проблемы с настройкой уникальных активных компонентов с помощью $emit в VueJS.

Я хочу, когда щелкнуть вкладку A в компонентах панели вкладок, это будет be active in Tab A, not active in Tab B и то же самое для вкладки 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>

vue.js vuejs2
person KitKit    schedule 03.01.2018    source источник
comment
В v-if похоже, что вы просто используете назначение переменных. Это может быть двойным равным. например: v-if="taba == true".   -  person IzumiSy    schedule 05.01.2018

Ответы (1)


arrow_upward
1
arrow_downward

Вам действительно нужно разделить компоненты на два? Я придумал эту простую реализацию для переключения вкладок.

<template>
  <div class="tab-a" v-if="currentTab == 'taba'">
    <span>This is Tab A</span>
  </div>
  <div class="tab-b" v-if="currentTab == 'tabb'">
    <span>This is Tab B and I want Tab A is not Active</span>
  </div>
  <div class="photo_react">
    <li @click="swtichTab('taba')" class="tab-a" data-tooltip="Open TabA">Open TabA</li>
    <li @click="switchTab('tabb')" class="tab-b" data-tooltip="Open TabB">Open TabB</li>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentTab: 'taba'
      }
    },

    methods: {
      switchTab(tab) {
        this.currentTab = tab;
      }
    }
  }
</script>
person IzumiSy    schedule 05.01.2018