案例概述
Vue 3 中动态组件的使用方法，通过 <component> 标签配合 :is 属性实现组件的动态切换。
组件结构
src/components/2026530/1/
├── MyLeft.vue # 左侧组件
├── MyRight.vue # 右侧组件
└── DynamicComponent.vue # 动态组件主页面
核心概念
动态组件语法
<component :is="要渲染的组件"></component>
关键点：
<component>标签是 Vue 的内置组件:is属性指定当前要渲染的组件- 当
:is属性值变化时，页面会自动切换组件
shallowRef() 函数
const showComponent = shallowRef(MyLeft)
特点：
shallowRef只处理对象最外层属性的响应式- 比
ref()更适合存储组件对象 - 优化性能，避免不必要的深层响应式处理
代码实现详解
1. MyLeft.vue
<template>MyLeft 组件</template>
简单的静态文本组件，用于展示。
2. MyRight.vue
<template>MyRight 组件</template>
简单的静态文本组件，用于展示。
3. DynamicComponent.vue（主组件）
<template>
<div>
<button @click="showComponent = MyLeft">展示 MyLeft 组件</button>
<button @click="showComponent = MyRight">展示 MyRight 组件</button>
<div>
<component :is="showComponent"></component>
</div>
</div>
</template>
<script setup>
import MyLeft from './MyLeft.vue'
import MyRight from './MyRight.vue'
import { shallowRef } from 'vue'
const showComponent = shallowRef(MyLeft)
</script>
代码解析
| 代码行 | 说明 |
|---|---|
| 第 3-4 行 | 两个按钮，点击时切换显示的组件 |
| 第 6 行 | <component> 标签，:is 属性绑定 showComponent |
| 第 12-13 行 | 导入两个子组件 |
| 第 14 行 | 导入 shallowRef 函数 |
| 第 16 行 | 使用 shallowRef 初始化，默认显示 MyLeft 组件 |
运行效果
页面显示两个按钮：
- "展示 MyLeft 组件" 按钮
- "展示 MyRight 组件" 按钮
点击第一个按钮，页面显示：
MyLeft 组件
点击第二个按钮，页面显示：
MyRight 组件
shallowRef vs ref
| 功能 | shallowRef | ref |
|---|---|---|
| 外层属性响应式 | ✓ | ✓ |
| 深层属性响应式 | ✗ | ✓ |
| 适用场景 | 存储组件、大对象 | 普通响应式数据 |
为什么使用 shallowRef 存储组件？
- 组件对象通常不需要深层响应式
- 提高性能，减少不必要的响应式处理
- 只需要响应式切换组件引用即可
总结
| 知识点 | 说明 |
|---|---|
| 动态组件 | 使用 <component :is="..."> 实现 |
| shallowRef | 适合存储组件对象，只响应外层变化 |
| 组件切换 | 修改 :is 绑定的变量即可切换 |