VUE中的export default和export使用方法解析
export default和export的區(qū)別
export主要用于對(duì)外輸出本模塊變量的接口，一個(gè)文件就可以被理解為一個(gè)模塊。export就是導(dǎo)出。
import就是在一個(gè)模塊中加載另一個(gè)含有export接口的模塊， import就是導(dǎo)入。
export default和export都能導(dǎo)出一個(gè)模塊里面的常量，函數(shù)，文件，模塊等，在其它文件或模塊中通過import來導(dǎo)入常量，函數(shù)，文件或模塊。這樣就可以使用它們了。但是，在一個(gè)文件或模塊中，export,import可以有多個(gè)，export default卻只能有一個(gè)。
通過export方式導(dǎo)出，在導(dǎo)入的時(shí)候需要加{}大括號(hào)，export default 就不需要{}。
export default簡(jiǎn)單示例
導(dǎo)出：
// test.js
var info = {
name: 'zs',
age: 20
}
export default info接收：
代碼中的test.js為上面的代碼文件；aaa可以任意命名，可以在控制臺(tái)輸出info對(duì)象
import aaa, ?from './test.js' console.log(aaa)
注意：
1、export default 向外暴露的成員，可以使用任意變量來接收
2、在一個(gè)模塊中，export default 只允許向外暴露一次
3、在一個(gè)模塊中，可以同時(shí)使用export default 和export 向外暴露成員
4、使用export向外暴露的成員，只能使用{ }的形式來接收，這種形式，叫做【按需導(dǎo)出】
5、export可以向外暴露多個(gè)成員，同時(shí)，如果某些成員，在import導(dǎo)入時(shí)，不需要，可以不在{ }中定義
6、使用export導(dǎo)出的成員，必須嚴(yán)格按照導(dǎo)出時(shí)候的名稱，來使用{ }按需接收
7、使用export導(dǎo)出的成員，如果想換個(gè)變量名稱接收，可以使用as來起別名
代碼示例
// test.js
var info = {
name: 'zs',
age: 20
}
export default info
export var title = '小星星'
export var content = '哈哈哈'在下面代碼中接收，test.js使用export default 和 export 向外暴露的成員
import person, {title, content as content1} from './test.js'
console.log(person);
console.log(title + '=======' + content1);到此這篇關(guān)于VUE中的export default和export使用方法解析的文章就介紹到這了,更多相關(guān)VUE中的export default內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue解決移動(dòng)端彈窗滾動(dòng)穿透問題的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vue登錄注冊(cè)及token驗(yàn)證實(shí)現(xiàn)代碼
在vue單頁(yè)中，我們可以通過監(jiān)控route對(duì)象，從中匹配信息去決定是否驗(yàn)證token，然后定義后續(xù)行為。下面通過實(shí)例代碼給大家分享vue登錄注冊(cè)及token驗(yàn)證功能，需要的朋友參考下吧2017-12-12
離線搭建vue環(huán)境運(yùn)行項(xiàng)目完整步驟
這篇文章主要給大家介紹了關(guān)于離線搭建vue環(huán)境運(yùn)行項(xiàng)目的相關(guān)資料,文中通過實(shí)例代碼以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06
文章介紹了一個(gè)父組件和子組件的交互過程,父組件通過點(diǎn)擊“關(guān)聯(lián)公司”輸入框彈出子組件dialog,子組件中使用SelectCompany.vue實(shí)現(xiàn)默認(rèn)選中功能,作者分享了個(gè)人經(jīng)驗(yàn),希望能對(duì)大家有所幫助2025-01-01
這篇文章主要介紹了vue中使用echarts的方法,結(jié)合實(shí)例形式詳細(xì)分析了vue中使用echarts的包安裝、引入、生命周期函數(shù)元素掛載等相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue中keep-alive的用法及問題描述,本文給大家介紹的非常詳細(xì)，具有一定的參考解決價(jià)值，需要的朋友可以參考下2018-05-05
Nuxt.js實(shí)現(xiàn)一個(gè)SSR的前端博客的示例代碼
這篇文章主要介紹了Nuxt.js實(shí)現(xiàn)一個(gè)SSR的前端博客的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例
本篇文章主要介紹了vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
解決Vue 項(xiàng)目打包后favicon無法正常顯示的問題
今天小編就為大家分享一篇解決Vue 項(xiàng)目打包后favicon無法正常顯示的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
element?el-tree折疊收縮的實(shí)現(xiàn)示例
本文主要介紹了element?el-tree折疊收縮的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08