前端模組化export || export default =＞ import暴露與接收資料
阿新 • • 發佈：2020-12-31
1、export與export default均可用於匯出常量、函式、檔案、模組等
2、在一個檔案或模組中，export、import可以有多個，export default僅有一個
3、通過export方式匯出，在匯入時要加{ }，export default則不需要
4、
(1) 輸出單個值，使用export default
(2) 輸出多個值，使用export
(3) export default與普通的export不要同時使用
案例：
//html程式碼塊——通用
<!DOCTYPE html>
<html lang="en" 第一種暴露：export——import 相對應的暴露跟接收。
b.js程式碼塊
// 第一種暴露案例：暴露常量：
export let name = 'wangjie';
export let age = 20;
// 第一種暴露案例：暴露方法：
export function rende (a,b) {
console.log(a+b);
}
a.js程式碼塊
import {name,age} from './b.js' // 匯入
console.log(name,age)
import {rende} 控制檯輸出結果
第二種暴露（預設暴露①）export default——import[暴露一個物件或者常量]
b.js程式碼塊
// 第二種 預設暴露 只能有一個[暴露一個常量]
export default {
name: 'App'
}
a.js程式碼塊
// 第二種暴露(預設暴露，單個暴露)
import obj from './b.js' // 匯入
console.log(obj);
控制檯輸出結果
第二種暴露（預設暴露②）export default——import[暴露函式]
b.js程式碼塊
// // 暴露函式
export default function abc(a,b){
console.log(a+b);
}
a.js程式碼塊
import fun from './b.js' // 匯入
fun(5,6);
控制檯結果
第三種（偽3）：利用萬用字元*批量接受暴露出來的值。
b.js程式碼塊
// 批量暴露元素
export let name = 'zhangsan';
export let age = '24';
export let gender = '男';
a.js程式碼塊
// 批量匯入
import * as obj from './b.js'
console.log(obj.name);
console.log(obj.age);
console.log(obj.gender);
控制檯結果
