在使用import語法引用模塊時妓柜,如何正確使用{}
例如:有兩個文件,home.js赂鲤、user.js
當需要在home.js中引入user.js的時候
//home.js
import user from './user';
對于上面的這種引入方法噪径,只有user.js文件中需要提供默認的export defulat進行導出(必須是默認導出)這樣在home.js文件中就可以使用user了。如下
//user.js
export default 'nihao'
在這種不使用{}來引用模塊的情況下数初,import模塊時的命名是隨意的找爱,即如下三種引用命名都是正確的:
// home.js
import user from './user'
import user2 from './user'
import anyUser from './user
因為它總是會解析到user.js中默認的export default。
而下面是使用了花括號命名的方法{user}來導入user.js:
import { user } from './user'
上面代碼生效的前提是泡孩,只有在模塊user.js中有如下命名導出為user的export 的代碼车摄,也就是:
//user.js
export const user = 42
而且,在明確聲明了命名導出后仑鸥,那么在另一個js中使用{}引用模塊時吮播,import時的模塊命名是有意義的,如下:
// home.js
import { user } from './user' // 正確眼俊,因為user.js中有命名為user的export
import { user2 } from './user' // 錯誤意狠!因為user.js中沒有命名為user2的export
import { anyUser } from './user' // 錯誤!因為user.js中沒有命名為anyUser的export
要想上述代碼正確執(zhí)行疮胖,你需要明確聲明每一個命名導出:
一個模塊中只能有一個默認導出export default环戈,但是卻可以有任意命名導出(0個、1個澎灸、多個)院塞,你也可以如下,一次性將他們導入:
// user.js
import user, { user2, anyUser } from './user'
這里我們使用導入默認導出user击孩,以及命名導出user2和anyUser。