vue2动态组件通过实现视图切换，需预先注册组件；配合可缓存状态，支持activated/deactivated钩子；传值推荐统一props-data对象，权限控制可在切换前校验。
Vue2 中使用动态组件切换视图，核心是 <component></component> 标签配合 :is 属性，它能根据变量值实时替换渲染的组件，比反复写 v-if/v-else 更清晰、更易维护，尤其适合 Tab 切换、多步骤表单、权限控制等场景。
动态组件的基本写法
用 <component :is="currentComp"></component> 替代多个条件判断块。只要 currentComp 是已注册的组件名（字符串）或组件对象，Vue 就会自动挂载对应组件。
-
currentComp通常定义在data中，初始值设为默认组件名，比如'TabHome' - 组件必须提前注册：可在局部
components选项中导入并声明，也可全局注册 - 注意：不能直接传未注册的字符串，否则渲染为空白，控制台会报 “Unknown component” 警告
配合 keep-alive 缓存状态
频繁切换时，组件反复销毁重建会导致状态丢失（如表单输入、滚动位置）。加 <keep-alive></keep-alive> 可缓存组件实例：
- 写法：
<keep-alive><component :is="currentComp"></component></keep-alive> - 组件首次创建后，
activated和deactivated钩子会被触发，可用于启停定时器、暂停视频等 - 若只想缓存部分组件，可用
include或exclude属性限定，例如<keep-alive include="TabHome,TabSearch"></keep-alive>
传参与通信方式
父组件向动态子组件传值，和普通组件一样用 props；但要注意：不同组件接收的 props 字段可能不同。
- 推荐统一用一个对象传入，比如
:props-data="sharedProps"，子组件内部再按需解构 - 避免在
:is绑定表达式里直接写组件对象（如:is="tabList[0]"），容易引发响应性问题；优先用字符串名称 + 局部注册 - 如果子组件需要主动通知父组件切换动作，仍用
$emit，父组件监听即可，逻辑不因动态加载而改变
常见搭配场景示例
比如做 Tab 栏：点击“推荐”“热点”“视频”，下方内容区切换不同组件。
- 模板中放三个按钮，每个绑定
@click="currentComp = 'TabRecommend'"等 - TabRecommend.vue、TabHot.vue、TabVideo.vue 各自独立开发，互不影响
- 配合
keep-alive后，切回“推荐”时仍保留上次浏览位置和筛选条件 - 若某 Tab 权限受限，可在点击前校验
if (hasPermission('video')) currentComp = 'TabVideo'
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
