在 VueJS 中使用 $emit 设置唯一的活动组件答案

【问题标题】：Set unique active Components using $emit in VueJS在 VueJS 中使用 $emit 设置唯一的活动组件
【发布时间】：2018-01-03 04:01:56
【问题描述】：

我在使用 VueJS 中的 $emit 设置唯一活动组件时遇到问题。

我想什么时候点击标签栏组件中的标签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>

【问题讨论】：

在v-if，看起来你只是使用变量赋值。那可能需要双等号。例如：v-if="taba == true".

标签： vue.js vuejs2

【解决方案1】：

您真的需要将组件分成两部分吗？我想出了这个简单的选项卡切换实现。

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

【讨论】：