当前位置：首页 > news >正文

vue三种import导入方式详解？

news 2025/8/19 0:09:08

在Vue.js中，你可以使用三种不同的方式来导入模块或组件：

默认导入 (Default Import)：
这种方式用于导入一个模块的默认导出（通常是一个组件或一个对象）。例如：
```
import MyComponent from './MyComponent.vue';
```
这将导入 MyComponent.vue 文件中的默认导出，并将其命名为 MyComponent。
命名导入 (Named Import)：
这种方式用于导入一个模块中的具名导出。你可以在导入语句中使用大括号 {} 指定要导入的名称。例如：
```
import { someExport, anotherExport } from './module';
```
这将从 module.js 文件中导入 someExport 和 anotherExport。
导入整个模块 (Import the Entire Module)：
你还可以导入整个模块，以便在需要时访问其中的多个导出。例如：
```
import * as myModule from './myModule';
```
```
import from './myModule';
```
这将导入整个 myModule.js 文件，你可以通过 myModule.someExport 访问其中的导出。

4.案例:
导入一个模块并使用其中的导出时，通常需要先确保导出已经在模块中正确定义。以下是一些示例，演示了如何访问不同导出方式的导出：

假设有一个名为 myModule.js 的模块：

// myModule.js// 默认导出
export default {message: "这是默认导出",
};// 具名导出
export const someExport = "这是具名导出";
export const anotherExport = "这是另一个具名导出";

现在，让我们在另一个文件中导入并访问这些导出：

默认导出的访问：

import MyModule from './myModule';console.log(MyModule.message); // 输出：这是默认导出

命名导出的访问：

import { someExport, anotherExport } from './myModule';console.log(someExport);       // 输出：这是具名导出
console.log(anotherExport);    // 输出：这是另一个具名导出

导入整个模块并访问其中的导出：

import * as myModule from './myModule';console.log(myModule.default.message); // 输出：这是默认导出
console.log(myModule.someExport);      // 输出：这是具名导出
console.log(myModule.anotherExport);   // 输出：这是另一个具名导出