vue动态组件component

<template>
  <div>
    <!-- 使用动态组件，通过 v-bind:is 绑定组件名称 -->
    <component :is="currentComponent" />

    <!-- 切换组件的按钮 -->
    <button @click="changeComponent('Home')">Home</button>
    <button @click="changeComponent('About')">About</button>
  </div>
</template>

<script>
// 引入需要动态切换的组件
import Home from './components/Home.vue';
import About from './components/About.vue';

export default {
  data() {
    return {
      // 当前显示的组件名称
      currentComponent: 'Home'
    };
  },
  methods: {
    // 切换当前显示的组件
    changeComponent(componentName) {
      this.currentComponent = componentName;
    }
  },
  components: {
    // 注册组件
    Home,
    About
  }
};
</script>

解释说明：

1. <component :is="currentComponent">：这是 Vue 提供的动态组件语法。is 属性用于指定要渲染的组件名称。根据 currentComponent 的值，Vue 会动态地渲染对应的组件。
2. data()：在 data 中定义了一个 currentComponent 变量，用来存储当前要显示的组件名称。
3. methods：定义了一个 changeComponent 方法，用于改变 currentComponent 的值，从而实现组件的切换。
4. components：注册了 Home 和 About 两个组件，以便可以在模板中使用它们。

通过这种方式，你可以轻松地在多个组件之间进行切换。