參考: https://blog.51cto.com/11871779/2348288
ES6模塊主要有兩個功能:export 和 import
export 用于對外輸出本模塊(一個文件可以理解為一個模塊)變量的接口
import 用于在一個模塊中加載另一個含有export接口的模塊。
也就是說使用 export 命令定義了模塊的對外接口以后,其他JS文件就可以通過 import 命令加載這個模塊(文件)却盘。這幾個都是ES6的語法讹语。
另外有: export default用法
// test.js
export default {
name: 'zs',
age: 20
}
或是
// test.js
var info = {
name: 'zs',
age: 20
}
export default info
在main.js中接收甫题,test.js使用export default 向外暴露的成員
import person from './test.js'
console.log(person);
注意:
1符欠、export default 向外暴露的成員蛹批,可以使用任意變量來接收
2仰泻、在一個模塊中荆陆,export default 只允許向外暴露一次
3、在一個模塊中集侯,可以同時使用export default 和export 向外暴露成員
4被啼、使用export向外暴露的成員,只能使用{ }的形式來接收棠枉,這種形式浓体,叫做【按需導(dǎo)出】
5、export可以向外暴露多個成員辈讶,同時命浴,如果某些成員,在import導(dǎo)入時贱除,不需要生闲,可以不在{ }中定義
6、使用export導(dǎo)出的成員月幌,必須嚴格按照導(dǎo)出時候的名稱碍讯,來使用{ }按需接收
7、使用export導(dǎo)出的成員扯躺,如果想換個變量名稱接收捉兴,可以使用as來起別名
例如
// test.js
var info = {
name: 'zs',
age: 20
}
export default info
export var title = '小星星'
export var content = '哈哈哈'
在main.js中接收,test.js使用export default 和 export 向外暴露的成員
import person, {title, content as content1} from './test.js'
console.log(person);
console.log(title + '=======' + content1);