vue如何实现组件切换

动态组件切换

使用 Vue 的 <component> 标签结合 is 属性实现动态组件切换。通过绑定 is 属性到变量，动态决定渲染哪个组件。

<template>
  <component :is="currentComponent"></component>
  <button @click="toggleComponent">切换组件</button>
</template>

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

export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' 
        ? 'ComponentB' 
        : 'ComponentA';
    },
  },
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

路由切换组件

通过 Vue Router 实现基于路由的组件切换，适合构建单页应用（SPA）。

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

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

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

export default router;

<!-- App.vue -->
<template>
  <router-view></router-view>
  <router-link to="/a">显示A</router-link>
  <router-link to="/b">显示B</router-link>
</template>

条件渲染

通过 v-if 或 v-show 控制组件的显示与隐藏，适合简单场景。

<template>
  <ComponentA v-if="showComponentA" />
  <ComponentB v-else />
  <button @click="showComponentA = !showComponentA">切换</button>
</template>

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

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

状态管理切换

通过 Vuex 或 Pinia 管理全局状态，驱动组件切换。

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

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

<template>
  <component :is="currentComponent"></component>
  <button @click="toggle">切换</button>
</template>

<script>
import { useComponentStore } from './store';
import { storeToRefs } from 'pinia';

export default {
  setup() {
    const store = useComponentStore();
    const { currentComponent } = storeToRefs(store);
    const { toggleComponent } = store;

    return {
      currentComponent,
      toggle: toggleComponent,
    };
  },
};
</script>