动态组件

本节目标：理解“动态组件”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。 有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：

上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现： <!-- 组件会在 currentTabComponent 改变时改变 --><component v-bind:is="currentTabComponent"></component> 在上述示例中，currentTabComponent 可以包括

已注册组件的名字，或

一个组件的选项对象

你可以在这里查阅并体验完整的代码，或在这个版本了解绑定组件选项对象，而不是已注册组件名的示例。

请留意，这个 attribute 可以用于常规 HTML 元素，但这些元素将被视为组件，这意味着所有的 attribute 都会作为 DOM attribute 被绑定。对于像 value 这样的 property，若想让其如预期般工作，你需要使用 .prop 修饰器。

解析 DOM 模板时的注意事项 有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，子元素是严格限制的。 同时有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。 这会导致我们使用这些有约束条件的元素时遇到一些问题。例如： <table> <blog-post-row></blog-post-row></table> 这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is attribute 给了我们一个变通的办法： <table> <tr is="blog-post-row"></tr></table>

需要注意的是如果我们从以下来源使用模板的话，这条限制是_不存在_的：

字符串 (例如：template: '...')

[单文件组件](https://cn.vuejs.org/v2/guide/single-file-components.html) (.vue)

[<script type="text/x-template">](https://cn.vuejs.org/v2/guide/components-edge-cases.html#X-Templates)