<component> 标签在 Vue 模板中的作用

我刚开始学习 Vuejs，需要使用单文件组件去实现功能，但在此过程中遇到了一个我不清楚的结构：

<template>
   <component :is="user === undefined ? 'div' : 'card'"> 

   ...some code

   </component>
</template>

在什么情况下会用到这个结构？为何不使用 <div> 来代替呢？

我在这里询问这个问题是因为每次我在谷歌上搜索 Vue coponent tag 时，都会获得关于组件本身的信息，而无法得到 component 标签相关的信息。

clod9353 回答到：

<component> 是一个特殊的 Vue 元素，它可与is 属性结合使用。其作用是有条件的（且动态的）渲染其他元素，具体元素取决于放在 is 属性中的内容。

<component :is="'card'"></component>

你所提到的代码将会在 DOM 中渲染 card 组件。你代码中的示例：

<component :is="user === undefined ? 'div' : 'card'"> 

当 user 变量未定义时渲染 div，否则渲染 card 组件。

此行为是动态的，因此如果 user 从未定义转为其他变量，vue 将会从 DOM 中移除 div，并插入 card 组件。

在 HTML 渲染结果中，即将永远不会看到一个叫 <component> 的节点，只会有 div 或者 card。

可以从这里找到相关信息。

J. Titus 回答到：

当你需要根据一些特定的信息（通常是一个 属性）动态的渲染一个特殊的标签（由 :is 指定）时会用到 <component>。在你发布的示例中，有两种情况：

1. user 是 undefined 时，渲染 <component> 为 <div>
2. user 不是 undefined 时，渲染 <component> 为 <card>

<card> 看起来像是拥有自己特殊模板和逻辑的自定义组件。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://stackoverflow.com/questions/6576...

译文地址：https://learnku.com/vuejs/t/53644