Vue export import 導(dǎo)入導(dǎo)出的多種方式與區(qū)別介紹

發(fā)布時(shí)間：2020-10-02 14:31:16 來源：腳本之家閱讀：331 作者：呂布的僚機(jī) 欄目：web開發(fā)

在使用vue導(dǎo)出時(shí)會(huì)有一個(gè)default關(guān)鍵字，下面舉例說明下在導(dǎo)出時(shí)使用export和export default的對(duì)應(yīng)的imort寫法的區(qū)別

一、部分導(dǎo)出和部分導(dǎo)入

部分導(dǎo)出和部分導(dǎo)入的優(yōu)勢(shì)，當(dāng)資源比較大時(shí)建使用部分導(dǎo)出，這樣一來使用者可以使用部分導(dǎo)入來減少資源體積，比如element-ui官方的就推薦使用部分導(dǎo)入來減少項(xiàng)目體積，因?yàn)閑lement-ui是一個(gè)十分龐大的框架，如果我們只用到其中的一部分組件，那么只將用到的組件導(dǎo)入就可以了。

1.1部分導(dǎo)出的寫法

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

另一種寫法，這種方法比較不推薦，因?yàn)榭雌饋頃?huì)比較亂。

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

1.2部分導(dǎo)入

只導(dǎo)入需要的資源

import {helloWorld} from "./utils.js" //只導(dǎo)入utils.js中的helloWorld方法
helloWorld(); //執(zhí)行utils.js中的helloWorld方法

1.3部分導(dǎo)出——全部導(dǎo)入

如果我們需要utils.js中的全部資源則可以全部導(dǎo)入

import * as utils from "./utils.js" //導(dǎo)入全部的資源，utils為別名，在調(diào)用時(shí)使用
utils.helloWorld(); //執(zhí)行utils.js中的helloWorld方法
utils.test(); //執(zhí)行utils.js中的test方法

二、全部導(dǎo)出和全部導(dǎo)入

如果使用全部導(dǎo)出，那么使用者在導(dǎo)入時(shí)則必須全部導(dǎo)入，推薦在寫方法庫時(shí)使用部分導(dǎo)出，從而將全部導(dǎo)入或者部分導(dǎo)入的權(quán)力留給使用者。

2.1全部導(dǎo)出

需要注意的是:一個(gè)js文件中可以有多個(gè)export，但只能有一個(gè)export default

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

2.2全部導(dǎo)入

import utils from "./utils.js"
utils.helloWorld();
utils.test();

總結(jié)

以上所述是小編給大家介紹的Vue export import 導(dǎo)入導(dǎo)出的多種方式與區(qū)別介紹，希望對(duì)大家有所幫助！

向AI問一下細(xì)節(jié)

Vue export import 導(dǎo)入導(dǎo)出的多種方式與區(qū)別介紹

一、部分導(dǎo)出和部分導(dǎo)入

二、全部導(dǎo)出和全部導(dǎo)入

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

一、部分導(dǎo)出和部分導(dǎo)入

二、全部導(dǎo)出和全部導(dǎo)入