vue中export和export default的使用（轉）

參考： 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);

注意：

一、export default 向外暴露的成員，能夠使用任意變量來接收

二、在一個模塊中，export default 只容許向外暴露一次

三、在一個模塊中，能夠同時使用export default 和export 向外暴露成員

四、使用export向外暴露的成員，只能使用{ }的形式來接收，這種形式，叫作【按需導出】

五、export能夠向外暴露多個成員，同時，若是某些成員，在import導入時，不須要，能夠不在{ }中定義

六、使用export導出的成員，必須嚴格按照導出時候的名稱，來使用{ }按需接收

七、使用export導出的成員，若是想換個變量名稱接收，能夠使用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);

很好的總結

 

參考：https://www.cnblogs.com/qq254980080/p/10321564.html