Question

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

我想要何时点击标签栏组件中的标签A，它＆{l} 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>

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

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

1 个答案: