如何创建动态加载的组件，这款工具有妙招（上）

Kendo UI for Vue最新版下载

当您发现希望模板的特定部分可以是动态的，并根据在其他地方计算出的某些条件在一个或多个组件之间切换时，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，甚至可以从此处的应用程序中的文件加载动态模式，以定义应呈现的组件。

---

了解最新Kendo UI最新资讯，请关注Telerik中文网！