如何在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

我非常认为你可以使用meta 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 描述了动态使用的绑定组件

希望我的方法对你有用!