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