如何在vue中动态加载组件答案

【问题标题】：how to load a component dynamically in vue如何在vue中动态加载组件
【发布时间】：2018-01-09 01:10:29
【问题描述】：

<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> 完全执行后加载。

有什么方法可以在我想要加载它的时候动态地在函数中附加组件来加载它？

【问题讨论】：

什么决定什么时候显示一个或另一个？你可能想看看conditional rendering。
有一个函数可以加载数组 -> stop_name_arr 将其内容反映在 dom 上。
v-if="stop_name_arr.length > 0" 可能有效。如果没有，则在加载数组时设置一个标志或其他东西。
在我加载完数组后，我不能从我的脚本中动态附加组件吗？
Vue 通常是 state 的反映。你的建议是命令式的而不是声明式的，Vue 会拒绝那样做。

标签： vue.js vuejs2 vue-component

【解决方案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 兼容的解决方案的编辑草稿。谢谢！

【讨论】：