在实际开发中，我们经常需要构建多标签页或条件渲染的界面。与其为每个视图写死一个组件，不如让 Vue 在运行时根据数据状态动态决定渲染哪个组件。这正是 <component> 配合 is 属性的核心用途。
核心用法
Vue 提供了一个特殊的内置组件 <component>，它本身不渲染任何内容，而是通过 :is 属性绑定一个组件名或组件对象，从而动态切换视图。
下面是一个完整的 HTML 示例，展示了如何在单文件中定义并切换两个组件（Home 和 About）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue Dynamic Component Demo</title>
</head>
<body>
<div id="app">
<!-- :is 绑定当前要显示的组件 -->
<component :is="currentView"></component>
</div>
<!-- 引入 Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
// 定义子组件
const Home = {
template: '<div><h3>首页</h3><p>这是首页内容</p></div>',
() {
.();
}
};
= {
: ,
() {
.();
}
};
({
: ,
: {
: ,
: [, ]
},
: {
() {
.[.];
}
}
});
( {
vm = .().;
(vm) vm. = ;
}, );
