Vue export import 導(dǎo)入導(dǎo)出的多種方式與區(qū)別介紹
在使用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)勢，當(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ì)大家有所幫助！
- Vite使用unplugin-auto-import實(shí)現(xiàn)vue3中的自動(dòng)導(dǎo)入
- vue3項(xiàng)目如何配置按需自動(dòng)導(dǎo)入API組件unplugin-auto-import
- vue中import導(dǎo)入三種方式詳解
- vue異步組件與組件懶加載問題(import不能導(dǎo)入變量字符串路徑)
- 解決vue3?defineProps?引入定義的接口報(bào)錯(cuò)
- 一文詳細(xì)聊聊vue3的defineProps、defineEmits和defineExpose
- Vue3中defineEmits、defineProps?不用引入便直接用
- vue3的defineExpose宏函數(shù)是如何暴露方法給父組件使用
- defineProps宏函數(shù)不需要從vue中import導(dǎo)入的原因解析
相關(guān)文章
這篇文章主要介紹了vant中的toast層級(jí)改變操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue+iview tabs context-menu 彈出框修改樣式的方法
今天遇到一個(gè)需求說頁面頂部的菜單右鍵彈出框離得有點(diǎn)遠(yuǎn),需要我們做調(diào)整,下面小編給大家分享下vue+iview tabs context-menu 彈出框修改樣式的方法,感興趣的朋友跟隨小編一起看看吧2024-06-06
自帶氣泡提示的vue校驗(yàn)插件（vue-verify-pop）
這篇文章主要為大家詳細(xì)介紹了自帶氣泡提示的vue校驗(yàn)插件，vue-verify-pop的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
本篇文章主要介紹了VUE元素的隱藏和顯示（v-show指令)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了vue攔截器如何增加token參數(shù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
如何使用el-table+el-tree+el-select動(dòng)態(tài)選擇對(duì)應(yīng)值
小編在做需求時(shí),遇到了在el-table表格中加入多條數(shù)據(jù),并且每條數(shù)據(jù)要通過el-select來選取相應(yīng)的值,做到動(dòng)態(tài)選擇,下面這篇文章主要給大家介紹了關(guān)于如何使用el-table+el-tree+el-select動(dòng)態(tài)選擇對(duì)應(yīng)值的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了VUE多層路由嵌套的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
在Vue 3.0中,與2.0版本相比有一定的差別,最明顯的就是缺少了build、config文件夾,下面這篇文章主要給大家介紹了關(guān)于vue3中vue.config.js配置及注釋的相關(guān)資料,需要的朋友可以參考下2022-08-08
混入可以省很多代碼(高類聚低耦合),還方便維護(hù),下面這篇文章主要給大家介紹了關(guān)于vuejs中使用mixin局部混入/全局混入的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
vue2實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的代碼
這篇文章主要介紹了vue2實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的代碼,需要的朋友可以參考下2018-08-08