如何在vue中动态加载组件

Question

<template>
  <div>
    <v-container fluid id="main">
      <v-card class="white lighten-4 elevation-3">

        <li v-for="stop in stop_name_arr">
          {{stop}}
        </li>

        <direct_bus_travel_time_in_between_stops>
        </direct_bus_travel_time_in_between_stops>

        <direct_bus_travel_distance_in_between_stops>
        </direct_bus_travel_distance_in_between_stops>

      </v-card>
    </v-container>
  </div>
</template>

我有两个组件direct_bus_travel_time_in_between_stops & direct_bus_travel_distance_in_between_stops要在<li v-for="stop in stop_name_arr">{{stop}}</li>完全执行后加载。

有没有办法在函数中动态地附加组件，以便在我想要加载它的时候加载它？

Answer 1

我非常认为你可以使用元component标签，它异步地加载传递给is属性的给定组件。

代码如下：

<component is="direct_bus_travel_time_in_between_stops" > </component> <component is="direct_bus_travel_time_in_between_stops" > </component>

您可以在此标记中添加函数/事件，它将根据此条件加载。我认为这个链接会很有帮助-- https://vuejs.org/v2/guide/components.html#Dynamic-Components，它描述了动态使用的绑定组件

希望我的方法对你有用！

更新：参考vue版本2.x提供了这个答案。我不知道vue 3.x，也没有读过3.x文档。您可以随时提交vue 3.x兼容解决方案的编辑草稿。谢谢!