Vue的export?default和帶返回值的data()及@符號的用法說明
export default和帶返回值data()及@符號用法
一直以來很費解為什么vue組件有的寫成export default，有什么用？
聲明一個vue，相當(dāng)于 new Vue({})
達(dá)到可復(fù)用的目的，也就是說，export default 相當(dāng)于導(dǎo)出當(dāng)前vue組件，在其它引入當(dāng)前組件時可以使用當(dāng)前組件中的方法和變量。
那data（）是什么意思？
起到局部變量的作用。也就是說，這個data（）中return的變量和方法只限于當(dāng)前聲明此data（）的組件使用。如果全局vue有個變量叫 user,當(dāng)前組件也有個變量叫user，那vue里面的到底用哪個？所以data()就起到了變量隔離的一種效果。
在引入組件時路徑上加上@符作用是什么？
在編寫vue文件中引入模塊（如下）這里路徑前面的“@”符號表示什么意思？
import model from "@/common/model";
作用：
@ 等價于 /src 這個目錄，避免寫麻煩又易錯的相對路徑
? ? ? resolve: {
? ? ? ? ? ? ? ? // 自動補(bǔ)全的擴(kuò)展名
? ? ? ? ? ? ? ? extensions: [".js", ".vue", ".json"],
? ? ? ? ? ? ? ? // 默認(rèn)路徑代理
? ? ? ? ? ? ? ? // 例如 import Vue from 'vue'，會自動到 'vue/dist/vue.common.js'中尋找
? ? ? ? ? ? ? ? alias: {
? ? ? ? ? ? ? ? ? ? "@": resolve("src"),
? ? ? ? ? ? ? ? ? ? "@config": resolve("config"),
? ? ? ? ? ? ? ? ? ? "vue$": "vue/dist/vue.common.js"
? ? ? ? ? ? ? ? }}export和export default的使用
export的使用
比喻index.js要使用test.js中的數(shù)據(jù)
首先在test.js文件中進(jìn)行導(dǎo)出操作
在index.js文件進(jìn)行導(dǎo)入操作
第一種方法:
此時的輸出結(jié)果是：
注意：
export 不能直接寫成這樣子
export{
"":"" // 這樣會報錯
....
}export default的使用
test.js文件
index.js文件中：
輸出的結(jié)果：
注意：
export default let a=10 // 不能類似這樣的寫 一樣也是會報錯的
所以還是要多總結(jié)的。。。
記?。?/strong>
一個js文件是可以有多個 export
但是一個js文件中只能有一個export default
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項目怎樣用nginx反向代理WebSocket請求地址
這篇文章主要介紹了vue項目怎樣用nginx反向代理WebSocket請求地址問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
本篇文章主要介紹了深入理解vue $refs的基本用法 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
組件是?vue.js?最強(qiáng)大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用，這篇文章主要介紹了Vue組件間傳值的實現(xiàn)2022-09-09
vue.js?Table?組件自定義列寬實現(xiàn)核心方法
這篇文章主要介紹了vue.js?Table?組件自定義列寬實現(xiàn)核心方法,文圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了在Vue中實現(xiàn)添加全局store方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue響應(yīng)式更新機(jī)制及不使用框架實現(xiàn)簡單的數(shù)據(jù)雙向綁定問題
vue是一款具有響應(yīng)式更新機(jī)制的框架，既可以實現(xiàn)單向數(shù)據(jù)流也可以實現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue響應(yīng)式更新機(jī)制及不使用框架實現(xiàn)簡單的數(shù)據(jù)雙向綁定問題,需要的朋友可以參考下2019-06-06
今天小編就為大家分享一篇vue 利用路由守衛(wèi)判斷是否登錄的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
淺談Vue3 Composition API如何替換Vue Mixins
這篇文章主要介紹了淺談Vue3 Composition API如何替換Vue Mixins，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vite配置@別名以及讓vscode智能提示路經(jīng)的步驟
這篇文章主要給大家介紹了關(guān)于vite配置@別名以及讓vscode智能提示路經(jīng)的步驟,文中通過代碼示例以及圖文介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue引用js文件的多種方式,本文大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05