vue中import导入三种方式详解

安驿

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

默认导入 (Default Import)：

这种方式用于导入一个模块的默认导出（通常是一个组件或一个对象）。例如：

1. import MyComponent from './MyComponent.vue';

复制代码

这将导入

1. MyComponent.vue

复制代码

文件中的默认导出，并将其命名为

1. MyComponent

复制代码

。

命名导入 (Named Import)：

这种方式用于导入一个模块中的具名导出。你可以在导入语句中使用大括号

1. {}

复制代码

指定要导入的名称。例如：

1. import { someExport, anotherExport } from './module';

复制代码

这将从

1. module.js

复制代码

文件中导入

1. someExport

复制代码

和

1. anotherExport

复制代码

。

导入整个模块 (Import the Entire Module)：

你还可以导入整个模块，以便在需要时访问其中的多个导出(

1. 如果导入无效在main.js引入

复制代码

)例如：

1. import * as myModule from './myModule';

复制代码

1. import from './myModule';

复制代码

这将导入整个

1. myModule.js

复制代码

文件，你可以通过

1. myModule.someExport

复制代码

访问其中的导出。

案例:

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

1. // myModule.js
   
2. 
   
3. // 默认导出
   
4. export default {
   
5.   message: "这是默认导出",
   
6. };
   
7. 
   
8. // 具名导出
   
9. export const someExport = "这是具名导出";
   
10. export const anotherExport = "这是另一个具名导出";

复制代码

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

• 默认导出的访问：
  

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

复制代码

• 命名导出的访问：
  

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

复制代码

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

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

复制代码

其中你如果要vue应用程序全局使用要在**main.js**中导入
这三种导入方式可以根据你的需求和项目结构来选择。默认导入适用于导入单一默认导出的情况，命名导入适用于导入多个具名导出的情况，而导入整个模块适用于需要多个导出的情况，并且你想将它们组织在一个对象中。

总结

到此这篇关于vue中import导入三种方式的文章就介绍到这了,更多相关vue import导入方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/316119g3h.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！