export default 和 export 的使用方式示例詳解

node中導入模塊：var 名稱 = require('模塊標識符')

node中向外暴露成員的形式：module.exports = {}

在ES6中，也通過規范的形式，規定瞭ES6中如何導入和導出模塊

ES6中導入模塊，使用 import 模塊名稱 from '模塊標識符' import '表示路徑'

import *** from *** 是ES6中導入模塊的方式

在ES6中，使用export default 和 export 向外暴露成員

例如：

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

到此這篇關於export default 和 export 的使用方式的文章就介紹到這瞭,更多相關export default export 使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！