Kendo UI for Vue使用教程：如何创建动态加载的组件（上）

当您发现希望模板的特定部分可以是动态的，并根据在其他地方计算出的某些条件在一个或多个组件之间切换时，Vue开发可以帮助您实现！

以一个仅在用户注册和登录时才呈现某些特定内容的网站为例，但是如果该特定用户具有付费订阅，则该网站也将显示第三个版本。

解决问题的一种方法是像这样链接v-if：

这当然可以工作，但是即使具有良好的成分组成，它也可能很快开始成为问题。如果逻辑变得更加复杂，或者随着时间的推移必须添加其他组件，则模板将变得拥挤且难以维护。

另一个常见的情况是使用一个API端点来告诉您它希望前端在屏幕上呈现什么样的组件（一种模式或清单），这种特殊情况可能会导致一些功能非常强大的应用程序，但是我们必须深入研究如何创建动态组件。

:is指令和

Vue为我们提供了一个特殊的组件和一个用于处理此类问题的指令，即组件。 此特殊组件的操作就像模板中的占位符，它将呈现其中的任何类型的元素 –从诸如Guest之类的自定义组件到诸如

• 之类的基本HTML元素。

   

  为了使我们能够使用，我们必须将名为is的属性传递给它。该指令需要一个值，该值可以是String或Object，已注册的组件或组件配置对象，让我们先来看看如何使用字符串。

  让我们通过使用重新思考前面的示例，模板将简化很多，如下所示：

   

  此时，您可以开始看到的功能：模板更加简洁，很快我们将添加一个计算属性来封装逻辑。

  将创建一个计算属性userComponent，它将使知道应呈现哪个组件。为此，我们将逻辑移至此计算属性，并返回一个字符串，其中包含应呈现的组件的名称。

  重要说明：请注意，在使用字符串方法时，需要将组件作为全局组件注册到应用程序中，或者导入到您的组件中，并在呈现它们的组件选项下注册。

  您将在下面看到的另一种方法是在计算属性中返回导入的组件本身。

  如果您忘记这样做，Vue将发出警告：“Unknown component : did you register the component correctly?”

  现在，添加计算出的属性和必要的导入。

  在顶部像往常一样导入所有三个组件，请注意出于演示目的，我们还为用户对象创建了一个本地data() 状态。

  在userComponent计算的prop内部，正在传递模板中先前的逻辑。您已经了解到，这两种方法更具可读性，最重要的是更加灵活。您可以使用Axios或Vuex，甚至可以从此处的应用程序中的文件加载动态模式，以定义应呈现的组件。