Vue 动态组件 component is

更新: 9/30/2025字数: 0 字 时长: 0 分钟

• 一、核心概念
  • 基本语法
• 二、基本用法
  • 1. 组件名切换
  • 2. 组件对象切换
• 三、高级用法
  • 1. 配合 keep-alive 缓存状态
  • 2. 动态导入异步组件
  • 3. 传递 props 和事件

一、核心概念

动态组件是 Vue 提供的一种特殊组件渲染方式，通过 :is 属性可以动态切换不同的组件。这是构建灵活可配置界面系统的关键技术。

基本语法

<component :is="currentComponent"></component>

二、基本用法

1. 组件名切换

<script setup>
import Home from "./Home.vue";
import About from "./About.vue";
const current = ref("Home");
</script>

<template>
  <button @click="current = current === 'Home' ? 'About' : 'Home'">切换组件</button>
  <component :is="current"></component>
</template>

2. 组件对象切换

<script setup>
import ComponentA from "./ComponentA.vue";
import ComponentB from "./ComponentB.vue";
const components = [ComponentA, ComponentB];
const currentIndex = ref(0);
</script>

<template>
  <component :is="components[currentIndex]"></component>
</template>

三、高级用法

1. 配合 keep-alive 缓存状态

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

2. 动态导入异步组件

<script setup>
const currentComponent = shallowRef(null);

function loadComponent(name) {
  currentComponent.value = defineAsyncComponent(() => import(`./${name}.vue`));
}
</script>

3. 传递 props 和事件

<component :is="currentComponent" :title="pageTitle" @submit="handleSubmit"></component>