export 祠饺,export default 和 import 區(qū)別 以及用法
首先要知道export返劲,import ,export default是什么
ES6模塊主要有兩個功能:export和import
export用于對外輸出本模塊(一個文件可以理解為一個模塊)變量的接口
import用于在一個模塊中加載另一個含有export接口的模塊磷支。
也就是說使用export命令定義了模塊的對外接口以后毫别,其他JS文件就可以通過import命令加載這個模塊(文件)。這幾個都是ES6的語法辟汰。
export和import(一個導出一個導入)
一個a.js文件有如下代碼:
export var name="李四";
在其它文件里引用如下:
import { name } from "/.a.js"http://路徑根據你的實際情況填寫
exportdefault{?
?data () {
return{
?}?
?},
? created:function(){?
?? alert(name)//可以彈出來“李四”?
?}
}
上面的例子是導出單個變量的寫法列敲,如果是導出多個變量就應該按照下邊的方法,用大括號包裹著需要導出的變量:
var name1="李四";
var name2="張三";
export { name1 ,name2 }
在其他文件里引用如下:
import { name1 , name2 } from "/.a.js"http://路徑根據你的實際情況填寫
exportdefault{??
data () {
return{
?}?
},?
?created:function(){?
?? alert(name1)//可以彈出來“李四”??
? alert(name2)//可以彈出來“張三”?
?}
}
如果導出的是個函數呢帖汞,那應該怎么用呢,其實一樣戴而,如下
functionadd(x,y){?
?alert(x*y)
//想一想如果這里是個返回值比如: return x-y,下邊的函數怎么引用
}
export { add }
在其他文件里引用如下:
import { add } from "/.a.js"http://路徑根據你的實際情況填寫
exportdefault{??
data () {
return{
?}?
?},??
created:function(){?
?add(4,6)//彈出來24
? }
}
export與export default
看完上面這幾個例子涨冀,想必你一定了解了如何使用export填硕,import,如果還是不懂可以自己動手試一試。上面講的是export和import鹿鳖,但是export跟export default 有什么區(qū)別呢扁眯?如下:
1、export與export default均可用于導出常量翅帜、函數姻檀、文件、模塊等
2涝滴、你可以在其它文件或模塊中通過import+(常量 | 函數 | 文件 | 模塊)名的方式绣版,將其導入,以便能夠對其進行使用
3歼疮、在一個文件或模塊中杂抽,export、import可以有多個韩脏,export default僅有一個
4缩麸、通過export方式導出,在導入時要加{ }赡矢,export default則不需要
這樣來說其實很多時候export與export default可以實現同樣的目的杭朱,只是用法有些區(qū)別阅仔。注意第四條,通過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;
一個人如果不想輸幅疼,就要不斷學好眼前的東西米奸,它們將來都會大有用處…