快捷導(dǎo)航

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

更新時(shí)間：2020年02月12日 13:50:40 作者：呂布的僚機(jī)

這篇文章主要介紹了Vue export import 導(dǎo)入導(dǎo)出的多種方式與區(qū)別介紹，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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

部分導(dǎo)出和部分導(dǎo)入的優(yōu)勢(shì)，當(dāng)資源比較大時(shí)建使用部分導(dǎo)出，這樣一來(lái)使用者可以使用部分導(dǎo)入來(lái)減少資源體積，比如element-ui官方的就推薦使用部分導(dǎo)入來(lái)減少項(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)榭雌饋?lái)會(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)入，推薦在寫方法庫(kù)時(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ì)大家有所幫助！

您可能感興趣的文章:

相關(guān)文章

vue3+elementui-plus實(shí)現(xiàn)無(wú)限遞歸菜單示例代碼
這篇文章主要介紹了vue3+elementui-plus實(shí)現(xiàn)無(wú)限遞歸菜單,當(dāng)一個(gè)組件的 key 值發(fā)生變化時(shí),Vue 會(huì)認(rèn)為這是一個(gè)新的組件實(shí)例,會(huì)強(qiáng)制重新創(chuàng)建和渲染這個(gè)組件,本文通過(guò)示例代碼詳細(xì)講解,需要的朋友可以參考下
2024-04-04
vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
VUE v-model表單數(shù)據(jù)雙向綁定完整示例
這篇文章主要介紹了VUE v-model表單數(shù)據(jù)雙向綁定,結(jié)合完整實(shí)例形式分析了vue.js實(shí)現(xiàn)表單數(shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
詳解VUE中常用的幾種import（模塊、文件）引入方式
這篇文章主要介紹了詳解VUE中常用的幾種import（模塊、文件）引入方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果
在vue項(xiàng)目中,我們通常會(huì)使用Axios來(lái)與后臺(tái)進(jìn)行數(shù)據(jù)交互,而當(dāng)我們發(fā)起請(qǐng)求時(shí),常常需要在頁(yè)面上顯示一個(gè)加載框（Loading）,然后等數(shù)據(jù)返回后自動(dòng)將其隱藏,本文介紹了基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果,需要的朋友可以參考下
2024-03-03
淺談Vue組件及組件的注冊(cè)方法
本文主要介紹了淺談Vue組件及組件的注冊(cè)方法，詳細(xì)的介紹了什么是組件，及其組件注冊(cè)的兩種方式(全局和局部)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-08-08
關(guān)于vue項(xiàng)目中搜索節(jié)流的實(shí)現(xiàn)代碼
這篇文章主要介紹了關(guān)于vue項(xiàng)目中搜索節(jié)流的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-09-09
Vue中路由傳參的實(shí)用方式?分享
這篇文章主要為大家詳細(xì)介紹了VUE項(xiàng)目中路由之間的傳值方式，文中的示例代碼講解詳細(xì)，涉及到的方法也都是開(kāi)發(fā)時(shí)常用的，希望對(duì)大家有多幫助
2023-06-06
vue引用js文件的多種方式(推薦)
這篇文章主要介紹了vue引用js文件的多種方式,本文大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-05-05
談?wù)剬?duì)Vue?Router的理解
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁(yè)面應(yīng)用，這篇文章主要介紹了對(duì)Vue?Router的理解,需要的朋友可以參考下
2022-11-11