当您发现希望模板的特定部分可以是动态的，并根据在其他地方计算出的某些条件在一个或多个组件之间切换时，Vue开发可以帮助您实现！
以一个仅在用户注册和登录时才呈现某些特定内容的网站为例，但是如果该特定用户具有付费订阅，则该网站也将显示第三个版本。
解决问题的一种方法是像这样链接v-if：
<template> <div> <Guest v-if="!user" /> <User v-if="user && !user.subscription" /> <Member v-if="user && user.subscription" /> </div> </template>
这当然可以工作，但是即使具有良好的成分组成，它也可能很快开始成为问题。 如果逻辑变得更加复杂，或者随着时间的推移必须添加其他组件，则模板将变得拥挤且难以维护。
另一个常见的情况是使用一个API端点来告诉您它希望前端在屏幕上呈现什么样的组件（一种模式或清单），这种特殊情况可能会导致一些功能非常强大的应用程序，但是我们必须深入研究如何创建动态组件。
:is指令和<component>
Vue为我们提供了一个特殊的组件和一个用于处理此类问题的指令，即<component>组件。 此特殊组件的操作就像模板中的占位符，它将呈现其中的任何类型的元素 - 从诸如Guest之类的自定义组件到诸如<li>之类的基本HTML元素。
为了使我们能够使用<component>，我们必须将名为is的属性传递给它。 该指令需要一个值，该值可以是String或Object，已注册的组件或组件配置对象，让我们先来看看如何使用字符串。
让我们通过使用<component>重新思考前面的示例，模板将简化很多，如下所示：
<template> <component :is="userComponent" /> </template>
此时，您可以开始看到<component>的功能：模板更加简洁，很快我们将添加一个计算属性来封装逻辑。
将创建一个计算属性userComponent，它将使<component>知道应呈现哪个组件。 为此，我们将逻辑移至此计算属性，并返回一个字符串，其中包含应呈现的组件的名称。
重要说明：请注意，在使用字符串方法时，需要将组件作为全局组件注册到应用程序中，或者导入到您的组件中，并在呈现它们的组件选项下注册。
您将在下面看到的另一种方法是在计算属性中返回导入的组件本身。
如果您忘记这样做，Vue将发出警告：“Unknown component : did you register the component correctly?”
现在，添加计算出的属性和必要的导入。
<script>
import Guest from './components/Guest';
import User from './components/User';
import Member from './components/Member';
export default {
data() {
return {
user: null
}
},
computed: {
userComponent() {
if (!this.user) return Guest;
if (!this.user.subscription) return User;
return Member;
}
}
};
</script>
在顶部像往常一样导入所有三个组件， 请注意出于演示目的，我们还为用户对象创建了一个本地data() 状态。
在userComponent计算的prop内部，正在传递模板中先前的逻辑。您已经了解到，这两种方法更具可读性，最重要的是更加灵活。 您可以使用Axios或Vuex，甚至可以从此处的应用程序中的文件加载动态模式，以定义应呈现的组件。