ES6 export 与 import

最新推荐文章于 2024-09-19 22:05:41 发布

我爱吃红薯

最新推荐文章于 2024-09-19 22:05:41 发布

阅读量160

点赞数

分类专栏： Vue 文章标签： export import

本文链接：https://blog.csdn.net/qq_45315910/article/details/103186117

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文详细介绍了ES6中的模块导出（export）和导入（import）的基本用法、别名导入以及export default命令。指出在使用时需要注意在<script>标签中添加type="module"属性，以及import路径的正确写法。还提到了export default命令的特性，可以省略花括号进行导入，并通过任意变量接收数据。

摘要由CSDN通过智能技术生成

导出（export）和导入（import）模块

模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。可以理解为每个模块都有自己的空间，即javaWeb中的域，如Request域或者Session域。export相当于往域中存数据，import相当于向域中取数据。还有每一个模块只加载一次是单例，若再去加载同目录下同文件，直接从自己空间域中去读取。export和import都是相对于.js文件。

基本用法

1，export：新建一个export.js，定义数据

let myName = "wachs";
let myfn = function(){
    return "哈哈哈哈，输出放在export中的数据！！！";
}
export { myName,myfn }

2，import：在importDemo.html中使用export.js中的数据。

<body>
<div id="app">
</div>
<script type="module">
    import { myName,  myfn } from "./js/export.js";
    console.log(myfn());// 哈哈哈哈，输出放在export中的数据！！！
    console.log(myName);// wachs
</script>
</body>

3，错误记录

错误1：

需要到<script>标签中加属性type="module"，变为：<script type="module">

错误2：

import { myName, myAge, myfn, myClass } from "js/export.js"路径错误，路径必须以"/", "./", or "../".开头

as+别名

导入要和导出的as后面的名一一对应。

let myName = "wachs";
let myfn = function(){
    return "哈哈哈哈，输出放在export中的数据！！！";
}
export { myName as myUserName,myfn as myfunction }

<body>
<div id="app">
</div>
<script type="module">
   // import { myName,  myfn } from "./js/export.js";
    import { myUserName,  myfunction } from "./js/export.js";
    console.log(myfunction());
    console.log(myUserName);
</script>
</body>

export default 命令

1，在一个文件或模块中，export、import 可以有多个，export default 仅有一个。export 方式导出，在导入时要加{ }，export default 可以省略{ }。

2，使用方式：

export default + 对应的导出接口变量

如：export default {name:"App"}，export default new VueRouter{}，等...

3，例：

let myfunction = function(){
    return "哈哈哈哈，输出放在export中的数据！！！";
}
//export default  myfn as myfunction //export default方式不能使用as+别名
export default  myfunction//export default + 变量

使用：

<body>
<script type="module">
    import myfunction  from "./js/export.js";//import b from "./xxx.js"; // 不需要加{}， 使用任意变量接收
    //import {myfunction } from "./js/export.js";
    console.log(myfunction());// 哈哈哈哈，输出放在export中的数据！！！
</script>
</body>

出现错误：