Vuejs 模板内的标签 <component>

Question

我刚刚开始学习 Vuejs，在我需要使用的单个文件组件之一中，有一个我不太明白的结构：

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

   </component>
</template>

在什么情况下有用？为什么我们不能用它<div>来代替呢？

我在这里问这个问题是因为每次我用谷歌搜索时，Vue component tag我都会得到有关组件本身的信息，而没有任何与标签相关的信息。

Answer 1

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

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

card将在 DOM 中渲染组件。您的代码中显示的示例：

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

div当用户未定义时将渲染 a ，card否则渲染一个组件。

此行为是动态的，因此如果user从 undefined 更改为其他值，vue 将从 DOM 中删除div，并插入card组件。

在 HTML 中，您永远不会看到名为 的节点<component>，只会看到 adiv或 acard