VUE中的export default和export使用方法解析
export default和export的區(qū)別
export主要用于對外輸出本模塊變量的接口,一個(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í)候需要加{}大括號,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、在一個(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3結(jié)合hooks開發(fā)可以注冊的二次確認(rèn)彈框
這篇文章主要為大家介紹了vue3結(jié)合hooks開發(fā)可以注冊的二次確認(rèn)彈框,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12vue項(xiàng)目打包后,由于html被緩存導(dǎo)致出現(xiàn)白屏的處理方案
這篇文章主要介紹了vue項(xiàng)目打包后,由于html被緩存導(dǎo)致出現(xiàn)白屏的處理方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03解決vue中修改export default中腳本報(bào)一大堆錯(cuò)的問題
今天小編就為大家分享一篇解決vue中修改export default中腳本報(bào)一大堆錯(cuò)的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08如何在基于vue-cli的項(xiàng)目自定義打包環(huán)境
本篇文章主要介紹了在基于vue-cli的項(xiàng)目自定義打包環(huán)境,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11從0到1搭建element后臺框架優(yōu)化篇(打包優(yōu)化)
這篇文章主要介紹了從0到1搭建element后臺框架優(yōu)化篇(打包優(yōu)化),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05vue在手機(jī)中通過本機(jī)IP地址訪問webApp的方法
這篇文章主要介紹了vue在手機(jī)中通過本機(jī)IP地址訪問webApp的方法,需要的朋友可以參考下2018-08-08