vue3动态组件

<template>
  <div>
    <!-- 动态组件使用 v-bind 绑定 :is 属性 -->
    <component :is="currentComponent" />
    <button @click="changeComponent('Home')">切换到 Home 组件</button>
    <button @click="changeComponent('About')">切换到 About 组件</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import Home from './components/Home.vue';
import About from './components/About.vue';

export default {
  components: {
    Home,
    About
  },
  setup() {
    // 定义当前组件的引用
    const currentComponent = ref('Home');

    // 切换组件的方法
    const changeComponent = (componentName) => {
      currentComponent.value = componentName;
    };

    return {
      currentComponent,
      changeComponent
    };
  }
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

解释说明

1. 动态组件：通过 <component :is="currentComponent" /> 实现，:is 属性可以动态地绑定到不同的组件名称。这里 currentComponent 是一个响应式的引用，它的值决定了要渲染哪个组件。

2. 按钮事件：两个按钮分别绑定了点击事件 @click="changeComponent('Home')" 和 @click="changeComponent('About')"，用于切换显示的组件。

3. setup 函数：在 Vue 3 的组合式 API 中，setup 函数用于定义组件的逻辑。这里我们定义了 currentComponent 引用和 changeComponent 方法，并将它们返回以供模板使用。

4. 组件注册：在 components 选项中注册了 Home 和 About 组件，这样可以在模板中直接使用它们。