1. 程式人生 > >認識Vue 的 export、export default、import

認識Vue 的 export、export default、import

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

 

作為copy磚家,具體概念我還真是迷糊...

查閱資料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(){//create:開啟檔案預設執行的方法
    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跟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;

--------------------------------------==》點滴積累

1.1*1.1*1.1*1.1*…=無限大...