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;

 

使用export default命令，爲模塊指定默認輸出，這樣就不須要知道所要加載模塊的變量名

//a.js

let sex = "boy";

export default sex（sex不能加大括號）

//本來直接export sex外部是沒法識別的，加上default就能夠了.可是一個文件內最多隻能有一個export default。

其實此處至關於爲sex變量值"boy"起了一個系統默認的變量名default，天然default只能有一個值，因此一個文件內不能有多個export default

 

// b.js

本質上，a.js文件的export default輸出一個叫作default的變量，而後系統容許你爲它取任意名字。因此能夠爲import的模塊起任何變量名，且不須要用大括號包含

import any from "./a.js"

import any12 from "./a.js"

console.log(any,any12)   // boy,boy

 

原文出處：https://www.cnblogs.com/ranyonsue/p/10691335.html