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

首先要知道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 有什麼區別呢？以下：

一、export與export default都可用於導出常量、函數、文件、模塊等
二、你能夠在其它文件或模塊中經過import+(常量 | 函數 | 文件 | 模塊)名的方式，將其導入，以便可以對其進行使用
三、在一個文件或模塊中，export、import能夠有多個，export default僅有一個
四、經過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;