<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&amp;direct_bus_travel_distance_in_between_stops将在<li v-for="stop in stop_name_arr">{{stop}}</li>完全执行后加载.

有没有办法在函数中动态附加组件,以便在需要加载时加载它?

推荐答案

我非常认为可以使用meta component标记,它异步加载传递给is属性的给定组件.

以下是代码:

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

您可以在该标记中添加函数/事件,它将在何种条件下加载.

希望我的方法对你有用!

UPDATE:这个答案是针对vue版本2提供的.x、 我不知道vue 3.没有读过3.xdoctor .您始终可以提交vue 3的编辑草稿.x兼容解决方案.谢谢

Vue.js相关问答推荐

在Nuxt项目中混合Scrolltrigger与Lenis

Vue CDN的html工作,但v—如果不工作

Vue3组合-如何在组件卸载时注销回调

超出最大调用堆栈大小 - Vue路由

在 vue 3 中使用 vue-chartjs:createElement 不是函数

Vuetify Datatable - 在所有列上启用内容编辑

一个 div 组件中的 Vue.js 2.0 路由链接

根据 URL 有条件地隐藏视图组件

如何将 vue.js 与 gulp 一起使用?

Vue&TypeScript:在项目目录外的 TypeScript 组件中实现导入时如何避免错误 TS2345?

如何在nuxt路由中添加meta?

是否可以在 vue-devtools 中命名 Vue 实例?

阻止 Vue 积极重用 dom 元素

Vue 3:模块 '"../../node_modules/vue/dist/vue"' 提示

如何避免在 Vue 中一直写 this.$store.state.donkey 的需要?

如何在 Vue.js 中延迟 @keyup 处理程序

在 Vue 应用程序中创建一个类的单个实例

带有 Google Auth Signin 的 Vuejs 全局函数

Vue中的嵌套循环

Vue 3 组合 API 数据()函数