Vue export import 導入導出的多種方式與區別

在使用vue導出時會有一個default關鍵字,下面舉例說明下在導出時使用export和export default的對應的imort寫法的區別javascript

1、部分導出和部分導入

部分導出和部分導入的優點,當資源比較大時建使用部分導出,這樣一來使用者能夠使用部分導入來減小資源體積,好比element-ui官方的就推薦使用部分導入來減小項目體積,由於element-ui是一個十分龐大的框架,若是咱們只用到其中的一部分組件, 那麼只將用到的組件導入就能夠了。vue

1.1部分導出的寫法java

export function helloWorld(){
    conselo.log("Hello World");
}
export function test(){
    conselo.log("this's test function");
}
複製代碼

另外一種寫法,這種方法比較不推薦,由於看起來會比較亂。element-ui

var helloWorld=function(){
    conselo.log("Hello World");
}
var test=function(){
    conselo.log("this's test function");
}
export helloWorld
export test
複製代碼

1.2部分導入框架

只導入須要的資源ui

import {helloWorld} from "./utils.js" //只導入utils.js中的helloWorld方法
helloWorld(); //執行utils.js中的helloWorld方法
複製代碼

1.3部分導出——所有導入this

若是咱們須要utils.js中的所有資源則能夠所有導入spa

import * as utils from "./utils.js" //導入所有的資源,utils爲別名,在調用時使用
utils.helloWorld(); //執行utils.js中的helloWorld方法
utils.test(); //執行utils.js中的test方法
複製代碼

2、所有導出和所有導入

若是使用所有導出,那麼使用者在導入時則必須所有導入,推薦在寫方法庫時使用部分導出,從而將所有導入或者部分導入的權力留給使用者。code

2.1所有導出ip

須要注意的是:一個js文件中能夠有多個export,但只能有一個export default

var helloWorld=function(){
    conselo.log("Hello World");
}
var test=function(){
    conselo.log("this's test function");
}
export default{
    helloWorld,
    test
} 
複製代碼

2.2所有導入

import utils from "./utils.js"
utils.helloWorld();
utils.test();
複製代碼
相關文章
相關標籤/搜索