Vue的export?default和帶返回值的data()及@符號的用法說明
export default和帶返回值data()及@符號用法
一直以來很費(fèi)解為什么vue組件有的寫成export default，有什么用？
聲明一個(gè)vue，相當(dāng)于 new Vue({})
達(dá)到可復(fù)用的目的，也就是說，export default 相當(dāng)于導(dǎo)出當(dāng)前vue組件，在其它引入當(dāng)前組件時(shí)可以使用當(dāng)前組件中的方法和變量。
那data（）是什么意思？
起到局部變量的作用。也就是說，這個(gè)data（）中return的變量和方法只限于當(dāng)前聲明此data（）的組件使用。如果全局vue有個(gè)變量叫 user,當(dāng)前組件也有個(gè)變量叫user，那vue里面的到底用哪個(gè)？所以data()就起到了變量隔離的一種效果。
在引入組件時(shí)路徑上加上@符作用是什么？
在編寫vue文件中引入模塊（如下）這里路徑前面的“@”符號表示什么意思？
import model from "@/common/model";
作用：
@ 等價(jià)于 /src 這個(gè)目錄，避免寫麻煩又易錯(cuò)的相對路徑
? ? ? 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)入操作
第一種方法:
此時(shí)的輸出結(jié)果是：
注意：
export 不能直接寫成這樣子
export{
"":"" // 這樣會報(bào)錯(cuò)
....
}export default的使用
test.js文件
index.js文件中：
輸出的結(jié)果：
注意：
export default let a=10 // 不能類似這樣的寫 一樣也是會報(bào)錯(cuò)的
所以還是要多總結(jié)的。。。
記?。?/strong>
一個(gè)js文件是可以有多個(gè) export
但是一個(gè)js文件中只能有一個(gè)export default
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
mitt又稱事務(wù)總線,是第三方插件,這篇文章主要為大家詳細(xì)介紹了Vue3中事件總線mitt的使用方式,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
Vue3中的setup是一個(gè)新的生命周期函數(shù),它可以用來代替組件中的 data和一些生命周期函數(shù)（如created和beforeMount）,這篇文章主要介紹了vue3如何使用setup代替created的相關(guān)資料,需要的朋友可以參考下2023-09-09
vue項(xiàng)目中接入websocket時(shí)需要ip端口動態(tài)部署問題
這篇文章主要介紹了vue項(xiàng)目中接入websocket時(shí)需要ip端口動態(tài)部署問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
基于ant-design-vue實(shí)現(xiàn)表格操作按鈕組件
這篇文章主要為大家介紹了基于ant-design-vue實(shí)現(xiàn)表格操作按鈕組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue如何動態(tài)改變列表搜索出關(guān)鍵詞的字體顏色
這篇文章主要介紹了Vue如何動態(tài)改變列表搜索出關(guān)鍵詞的字體顏色問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
本文將探討 props 驗(yàn)證失敗的常見原因,并提供解決方法,幫助開發(fā)者在 Vue 組件開發(fā)中避免這些問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要為大家詳細(xì)介紹了前端框架Vue.js構(gòu)建大型應(yīng)用的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細(xì)教程（二）
這篇文章主要介紹了使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細(xì)教程（二），非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-01-01
這篇文章主要介紹了vue生命周期,結(jié)合實(shí)例形式分析了vue.js生命周期相關(guān)原理、步驟、函數(shù)與操作注意事項(xiàng),需要的朋友可以參考下2018-08-08
antdv的table因數(shù)據(jù)量過大導(dǎo)致的卡頓問題及解決
這篇文章主要介紹了antdv的table因數(shù)據(jù)量過大導(dǎo)致的卡頓問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11