vue实现组件切换

Vue 实现组件切换的方法

在 Vue 中实现组件切换可以通过多种方式，以下是几种常见的方法：

动态组件（component 标签）

使用 Vue 内置的 <component> 标签配合 is 属性可以实现动态组件切换：

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">显示组件A</button>
    <button @click="currentComponent = 'ComponentB'">显示组件B</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>

条件渲染（v-if/v-show）

使用 v-if 或 v-show 指令根据条件显示不同组件：

<template>
  <div>
    <button @click="showComponentA = true">显示组件A</button>
    <button @click="showComponentA = false">显示组件B</button>

    <ComponentA v-if="showComponentA" />
    <ComponentB v-else />
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      showComponentA: true
    }
  }
}
</script>

路由切换（Vue Router）

对于更复杂的应用，可以使用 Vue Router 实现组件切换：

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'

const routes = [
  { path: '/component-a', component: ComponentA },
  { path: '/component-b', component: ComponentB }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

<!-- App.vue -->
<template>
  <div>
    <router-link to="/component-a">组件A</router-link>
    <router-link to="/component-b">组件B</router-link>

    <router-view></router-view>
  </div>
</template>

状态管理（Vuex/Pinia）

结合状态管理工具可以实现更灵活的组件切换：

// store.js (Pinia示例)
import { defineStore } from 'pinia'

export const useComponentStore = defineStore('component', {
  state: () => ({
    currentComponent: 'ComponentA'
  }),
  actions: {
    setComponent(component) {
      this.currentComponent = component
    }
  }
})

<template>
  <div>
    <button @click="store.setComponent('ComponentA')">组件A</button>
    <button @click="store.setComponent('ComponentB')">组件B</button>

    <component :is="store.currentComponent"></component>
  </div>
</template>

<script setup>
import { useComponentStore } from './store'
const store = useComponentStore()
</script>

组件切换时的生命周期

使用动态组件或路由切换时，可以监听组件的生命周期事件：

<component 
  :is="currentComponent" 
  @hook:beforeCreate="handleBeforeCreate"
  @hook:created="handleCreated"
  @hook:mounted="handleMounted"
/>

组件切换动画

可以为组件切换添加过渡动画：

<template>
  <transition name="fade" mode="out-in">
    <component :is="currentComponent"></component>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

以上方法可以根据具体需求选择使用，简单切换可以使用动态组件或条件渲染，复杂应用推荐使用路由和状态管理方案。