《前端》vue的自我修養（webpack版）--export ，export default 和 import 區別以及用法

1、export，import ，export default是什麼?

ES6模塊主要有兩個功能：export 和 import

export ：

用於對外 輸出本模塊（一個文件可以理解爲一個模塊）變量的接口。

import ：

用於在一個模塊中加載另一個含有export接口的模塊。
也就是說使用export命令定義了模塊的對外接口以後，其他JS文件就可以通過import命令加載這個模塊（文件）。這幾個都是ES6的語法。

實例：

1、一個a.js文件有如下代碼：

export var name="李四";

 在其它文件裏引用如下：

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

2、上面的例子是導出單個變量的寫法，如果是在a.js中導出多個變量就應該按照下邊的方法，用大括號包裹着需要導出的變量：

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

在其他文件裏引用如下：

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

3、如果導出的是個函數呢，那應該怎麼用呢,其實一樣，如下：

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的異同

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