首先要知道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;

轉載于:https://www.cnblogs.com/shufang1105/p/9255002.html

總結

以上是生活随笔為你收集整理的export ，export default 和 import 区别 以及用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。