如何在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://v2.vuejs.org/v2/guide/components.html#Dynamic-Components 其中描述了动态使用的绑定组件

希望我的方法对你有用！

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

Answer 2

我已经准备了类似的方法，但更加自动化，使用由 pinia 提供支持的 localStorage 和包装器组件，一次切换所有实例。 看看并随意发表评论:)

https://github.com/Nagell/dynamic_loading_components