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);

注意:

1、export default 向外暴露的成員,可以使用任意變量來接收

2、在一個模塊中,export default 只允許向外暴露一次

3、在一個模塊中,可以同時使用export default 和export 向外暴露成員

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

5、export可以向外暴露多個成員,同時,如果某些成員,在import導入時,不需要,可以不在{ }中定義

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

7、使用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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM