export,import ,export default区别
export,import ,export default区别
一.export,import ,export default
ES6模块主要有两个功能:export和import
export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。这几个都是ES6的语法。
二.export(导出)和import(导入)
1.一个a.js文件有如下代码:
export var name="李四";
在其它文件里引用:
import { name } from "/.a.js" //路径根据你的实际情况填写
export default {
data () {
return { }
},
created:function(){
alert(name)//可以弹出来“李四”
}
}
2.上面的例子是导出单个变量的写法,如果是导出多个变量就应该按照下边的方法,用大括号包裹着需要导出的变量:
var name1="李四";
var name2="张三";
export { name1 ,name2 }
在其他文件里引用:
import { name1 , name2 } from "/.a.js" //路径根据你的实际情况填写
export default {
data () {
return { }
},
created:function(){
alert(name1)//可以弹出来“李四”
alert(name2)//可以弹出来“张三”
}
}
3.如果导出的是个函数呢,那应该怎么用呢,其实一样
function add(x,y){
alert(x*y)
// 想一想如果这里是个返回值比如: return x-y,下边的函数怎么引用
}
export { add }
在其他文件里引用:
import { add } from "/.a.js" //路径根据你的实际情况填写
export default {
data () {
return { }
},
created:function(){
add(4,6) //弹出来24
}
}
三.export与export default
1.export与export default均可用于导出常量、函数、文件、模块等
2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用
3.在一个文件或模块中,export、import可以有多个,export default仅有一个
4.通过export方式导出,在导入时要加{ },export default则不需要
这样来说其实很多时候export与export
default可以实现同样的目的,只是用法有些区别。注意第四条,通过export方式导出,在导入时要加{ },export
default则不需要。使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。
var name="李四";
export { name }
//import { name } from "/.a.js"
可以写成:
var name="李四";
export default name
//import name from "/.a.js" 这里name不需要大括号
再看第3条,在一个文件或模块中,export、import可以有多个,export default仅有一个,也就是:
var name1="李四";
var name2="张三";
export { name1 ,name2 }
也可以写成如下,也是可以的,import跟他类似。
var name1="李四";
var name2="张三";
export name1;
export name2;
export,import ,export default区别的更多相关文章
- ES6中的export,import ,export default
ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口import用于在一个模块中加载另一个含有export接口的模块.也就是说使用 ...
- [Hive - LanguageManual] Import/Export
LanguageManual ImportExport Skip to end of metadata Added by Carl Steinbach, last edited by Le ...
- module.exports,exports,export和export default,import与require区别与联系【原创】
还在为module.exports.exports.export和export default,import和require区别与联系发愁吗,这一篇基本就够了! 一.首先搞清楚一个基本问题: modu ...
- export,export default和import的区别以及用法
首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口 ...
- export ,export default 和 import 区别 以及用法
首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口i ...
- JavaScript ES6中export及export default的区别以及import的用法
本文原创地址链接:http://blog.csdn.net/zhou_xiao_cheng/article/details/52759632,未经博主允许不得转载. 相信很多人都使用过export.e ...
- [ES6]import 与export的用法 ,export 与export default 的 区别 以及用法
一.import 与export export(导出):用于对外输出本模块(一个文件可以理解为一个模块)变量的接口: import(导入):用于在一个模块中加载另一个含有export接口的模块. 1. ...
- module.exports,exports,export和export default,import与require区别与联系
还在为module.exports.exports.export和export default,import和require区别与联系发愁吗,这一篇基本就够了! 一.首先搞清楚一个基本问题: modu ...
- JavaScript ES6中export、export default、import用法和区别
相信熟悉JS ES6的同学都知道export.export default是导出,import是导入的意思. 那么问题就来了, 1.import 导入要怎么用? 2.export.export def ...
随机推荐
- 可显示行号的log工具
import android.util.Log; /** * (ExtendedLog=>ELog)可以记录行号,类名,方法名的Log工具 * * @author Fantouch */ pub ...
- swift4.0 对 afn 进行二次封装
先将 afn 用pod导入到 工程中 创建一个类 ZHttpTools 继承自 AFHTTPSessionManager 一般我们不希望网络请求同时有多个存在,所以我们将这个工具类 设计成单例 代 ...
- Effective Java 第三版——44. 优先使用标准的函数式接口
Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...
- C#-MVC开发微信应用(6)--用户分组信息管理
让我们继续深入探索这方面的技术,为了更好的应用起来,专心做好底层的技术开发.本篇继续上一篇的介绍,主要介绍分组管理方面的开发应用,这篇的内容和上一篇,作为一个完整的用户信息和分组信息管理的组合. 1. ...
- emacs自动折行设置
- emacs自动折行 - 临时设置下 M-x `toggle-truncate-lines` - init.el 中添加 `(toggle-truncate-lines 1)`
- Pitch detection algorithm(基音搜索算法)PDA相关链接
第一:维基百科 http://en.wikipedia.org/wiki/Pitch_estimation 简要系统介绍了基音估计算法的分类和一些链接,论文 第二:http://ws2.bingham ...
- Oracle同一个用户下启动多个数据库实例
oracle@yingxiang-testServer1 oradata]$ export ORACLE_SID=APPDB[oracle@yingxiang-testServer1 oradata ...
- error C3861: “xxxx”: 找不到标识符
问题出现背景:c++静态类库中主函数里包含子函数 解决办法:先声明子函数再写主函数.
- token令牌和jwt
用户登录,后端生成token返回给前端 前端拿到token,以后每次登录使用header里的token进行权限验证 后端接收到前端传来的token,如果是通过数据库或redis或session进行比对 ...
- 由n个元素组成的数组,n-2个数出现了偶数次,两个数出现了奇数次,且这两个数不相等,如何用O(1)的空间复杂度,找出这两个数
思路分析: 方法一:涉及到两个数,就要用到异或定理了:若a^b=x,则a=b^x,b=x^a.对于这道题,假设这两个数分别为a.b,将数组中所有元素异或之后结果为x,因为a!=b,所以x=a^b,且x ...