JS 和 Vue.js 中的动态导入

Question

我正在使用 Vue.js 框架编写一个 Web 应用程序。需要使用动态导入。您需要使用参数及其名称进行导入，然后定义生成的组件。

  js中动态导入的语法如下：

  async () => {

      const module_path = 'module_path';

      const module = await import(module_path)

      module.default();

    }

  因此，只能在异步函数内使用动态导入的库。我需要在其他地方使用导入的组件：

  <template>

     <div>

        <!-- imported component definition -->

        <component v-bind:is="my_component"></component>

     </div>

  </template>

  <script>

     # Here you need to dynamically import the component, so that you 

     # can define it later on line 3.

     # How to make a static import is clear (shown below). But I need a 

     # dynamic one.

     import my_component from "./component_title.Vue"

     

     export default {

        props: () -> {

           # The name of the component to be imported.

           # Transferred from another component.

           component_title: {type: String, default: null}

        }

        components: {

           # The component is declared

           my_component: my_component

        }

     }

  </script>

  这个任务可以实现动态导入吗？

Answer 1

是的。import()只需在您的组件中使用：components:&nbsp;{&nbsp; &nbsp;&nbsp;my_component:&nbsp;()&nbsp;=>&nbsp;import(path) }