[英]Dynamic import in JS and Vue.js
I am writing a web application using the Vue.js framework.我正在使用 Vue.js 框架编写一个 web 应用程序。 There was a need to use dynamic import.
需要使用动态导入。 You need to import using the parameter with its name, and then define the resulting component.
您需要使用参数及其名称进行导入,然后定义生成的组件。
The syntax for the following dynamic import in js: js中以下动态导入的语法:
async () => {
const module_path = 'module_path';
const module = await import(module_path)
module.default();
}
Thus, using a dynamically imported library is only possible inside an asynchronous function. I need to use the imported component elsewhere:因此,只能在异步 function 中使用动态导入的库。我需要在其他地方使用导入的组件:
<template>
<div>
<!-- imported component definition -->
<component v-bind:is="my_component"></component>
</div>
</template>
<script lang="coffee">
# 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>
Is it possible to implement dynamic import in this task?是否可以在此任务中实现动态导入?
Yea.是的。 Just use
import()
at your component:只需在您的组件中使用
import()
:
components: {
my_component: () => import(path)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.