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