Vue3：tab1假切换到tab2

Question

关于vue3的一个问题

父组件导航栏 index 与 tab1 与 tab2 两个按钮。tab1 页面当中有切换 tab2 页面的按钮，点击之后，父组件导航栏 index 中的 tab2 按钮出现被点击一样的 css 样式变化。然而，实际上，此时仍处于 tab1 页面内，但页面内容切换为 tab2 页面内容，且此时导航栏的 tab2 虽然仍可点击，但实际功能被禁用。

想问一下大家，这种情况应该怎么去写呢？思路应该是怎么样的呢？

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

在Vue 3中，要实现父组件导航栏与子组件tab1和tab2之间的交互，你可以使用Vue的响应式系统、事件系统以及CSS来完成这个任务。下面是实现你需求的一种思路和代码示例：

1. 定义状态和方法

首先，在父组件中定义一个响应式的状态来控制当前激活的tab，以及一个方法来切换tab。

// 父组件
<template>
  <div>
    <nav>
      <button :class="{ active: activeTab === 'tab1' }" @click="switchTab('tab1')">Tab 1</button>
      <button :class="{ active: activeTab === 'tab2' }" @click="switchTab('tab2')">Tab 2</button>
    </nav>
    <component :is="activeTab" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const activeTab = ref('tab1');

function switchTab(tab) {
  activeTab.value = tab;
}
</script>

<style>
.active {
  color: red; /* 选中状态的样式 */
}
</style>

2. 创建Tab组件

然后，创建Tab1和Tab2组件。在Tab1组件中，添加一个按钮来触发切换到Tab2。

// Tab1.vue
<template>
  <div>
    <h1>Tab 1 Content</h1>
    <button @click="switchToTab2">Go to Tab 2</button>
  </div>
</template>

<script setup>
import { emit } from 'vue';

function switchToTab() {
  emit('switch-tab', 'tab2');
}
</script>

3. 监听子组件事件

在父组件中，监听来自Tab1组件的事件，并调用切换tab的方法。

// 父组件
<template>
  <!-- ... -->
  <component :is="activeTab" @switch-tab="switchTab" />
</template>

4. CSS样式

确保CSS样式正确应用，以便在切换tab时显示选中状态并禁用点击。

/* 在父组件的<style>标签内 */
button {
  cursor: pointer;
}

button[disabled] {
  color: grey;
  cursor: not-allowed;
}

5. 禁用点击功能

要禁用点击功能，你可以在父组件中添加一个方法来动态设置按钮的disabled属性。

// 父组件
<template>
  <nav>
    <button :class="{ active: activeTab === 'tab1', disabled: activeTab === 'tab2' }" @click="switchTab('tab1')">Tab 1</button>
    <button :class="{ active: activeTab === 'tab2', disabled: activeTab === 'tab1' }" @click="switchTab('tab2')">Tab 2</button>
  </nav>
  <!-- ... -->
</template>

参考资料

• Vue 3官方文档：https://v3.vuejs.org/
• Vue 3 Composition API指南：https://v3.vuejs.org/guide/composition-api-introduction.html

通过上述步骤，你应该能够实现所需的交互效果。记得根据你的具体需求调整代码和样式。