1. 程式人生 > >export ,export default 和 import 區別以及用法

export ,export default 和 import 區別以及用法

默認 函數 根據 pre 可用 返回 大括號 能夠 返回值

首先要知道export,import ,export default是什麽

ES6模塊主要有兩個功能:export和import
export用於對外輸出本模塊(一個文件可以理解為一個模塊)變量的接口
import用於在一個模塊中加載另一個含有export接口的模塊。
也就是說使用export命令定義了模塊的對外接口以後,其他JS文件就可以通過import命令加載這個模塊(文件)。這幾個都是ES6的語法。

export和import(一個導出一個導入)

一個a.js文件有如下代碼:

export var name="李四";

在其它文件裏引用如下:

技術分享圖片
import { name } from "/.a.js" //路徑根據你的實際情況填寫
export default {
  data () {
    return { }
  },
  created:function(){
    alert(name)//可以彈出來“李四”
  }
 }
技術分享圖片

上面的例子是導出單個變量的寫法,如果是導出多個變量就應該按照下邊的方法,用大括號包裹著需要導出的變量:

 var name1="李四";
 var name2="張三";
 export { name1 ,name2 }

在其他文件裏引用如下:

技術分享圖片
import { name1 , name2 } from "/.a.js" //路徑根據你的實際情況填寫
export default {
  data () {
    return { }
  },
  created:function(){
    alert(name1)//可以彈出來“李四”
    alert(name2)//可以彈出來“張三”
  }
 }
技術分享圖片

如果導出的是個函數呢,那應該怎麽用呢,其實一樣,如下

function add(x,y){
   alert(x*y)
  //  想一想如果這裏是個返回值比如: return x-y,下邊的函數怎麽引用
}
export { add }

在其他文件裏引用如下:

技術分享圖片
import { add } from "/.a.js" //路徑根據你的實際情況填寫
export default {
  data () {
    return { }
  },
  created:function(){
   add(4,6) //彈出來24
  }
 }
技術分享圖片

export與export default

看完上面這幾個例子,想必你一定了解了如何使用export,import,如果還是不懂可以自己動手試一試。上面講的是export和import,但是export跟export default 有什麽區別呢?如下:

1、export與export default均可用於導出常量、函數、文件、模塊等
2、你可以在其它文件或模塊中通過import+(常量 | 函數 | 文件 | 模塊)名的方式,將其導入,以便能夠對其進行使用
3、在一個文件或模塊中,export、import可以有多個,export default僅有一個
4、通過export方式導出,在導入時要加{ },export default則不需要

這樣來說其實很多時候export與export default可以實現同樣的目的,只是用法有些區別。註意第四條,通過export方式導出,在導入時要加{ },export default則不需要。使用export default命令,為模塊指定默認輸出,這樣就不需要知道所要加載模塊的變量名。

技術分享圖片
var name="李四";
export { name }
//import { name } from "/.a.js" 
可以寫成:
var name="李四";
export default name
//import name from "/.a.js" 這裏name不需要大括號
技術分享圖片

再看第3條,在一個文件或模塊中,export、import可以有多個,export default僅有一個,也就是說如下代碼:

var name1="李四";
var name2="張三";
export { name1 ,name2 }

也可以寫成如下,也是可以的,import跟他類似。

 var name1="李四";
 var name2="張三";
 export name1;
 export name2;

export ,export default 和 import 區別以及用法