vue3 动态引入js方法
时间: 2023-08-05 09:09:54 浏览: 67
在 Vue 3 中,你可以使用 `import()` 方法来动态引入 JavaScript 文件。这个方法返回一个 Promise 对象,你可以在 Promise 的 `then` 方法中获取到导出的模块。
下面是一个示例,假设你有一个 `dynamic.js` 文件,它导出了一个 `hello` 函数:
```javascript
// dynamic.js
export function hello() {
console.log("Hello, world!");
}
```
现在,你可以在 Vue 3 中使用以下代码动态引入 `dynamic.js` 文件并调用 `hello` 函数:
```javascript
import { defineAsyncComponent } from "vue";
const MyComponent = defineAsyncComponent({
loader: () => import("./dynamic.js"),
});
// 在组件中使用 MyComponent
```
在这个示例中,我们使用了 `defineAsyncComponent` 方法来定义一个异步组件,`loader` 选项中使用 `import()` 方法来动态加载 `dynamic.js` 文件。这个异步组件可以像普通的组件一样使用,例如:
```html
<template>
<div>
<button @click="sayHello">Say hello</button>
</div>
</template>
<script>
import { defineAsyncComponent } from "vue";
const MyComponent = defineAsyncComponent({
loader: () => import("./dynamic.js"),
});
export default {
components: {
MyComponent,
},
methods: {
async sayHello() {
const module = await MyComponent();
module.hello(); // 输出 "Hello, world!"
},
},
};
</script>
```
在这个示例中,我们在 `sayHello` 方法中使用 `await` 关键字等待 `MyComponent` 异步组件加载完成,然后获取到导出的模块并调用 `hello` 函数。