如何在vue3中同時(shí)使用tsx與setup語(yǔ)法糖
前言
想這樣做的原因是在vue3里使用tsx開(kāi)發(fā)時(shí),props的聲明顯得異常麻煩,不禁想到defineProps的便利,但同時(shí)在vue3里tsx文件里tsx語(yǔ)法的書(shū)寫(xiě)必須在setup函數(shù)或者render函數(shù)里,無(wú)法正常的使用defineProps等一系列的宏.為了能夠更加便利,使用了下文的方法.
Tsx與setup語(yǔ)法糖的優(yōu)勢(shì)
目前,在vue3中使用tsx已經(jīng)越來(lái)越流行且便捷,對(duì)于webpack與vite構(gòu)建的項(xiàng)目,都有很好的插件支持.tsx帶來(lái)的優(yōu)勢(shì)可能給我的感受最直接的就是更像是在寫(xiě)js代碼.
同時(shí),vue3的setup語(yǔ)法糖的便利也深入人心,不需要return,不需要聲明components,并且提供了defineProps等等方便的宏.
遇到的問(wèn)題
這是在用tsx編寫(xiě)vue組件時(shí),遇到的props的問(wèn)題,可以看到props的聲明占據(jù)了大量篇幅,同時(shí)type的寫(xiě)法也比較復(fù)雜,如果在加上required字段,需要的篇幅會(huì)更大.
這樣聲明props的方式并不優(yōu)雅,所以想起了setup語(yǔ)法糖下的defineProps函數(shù).經(jīng)過(guò)測(cè)試,defineProps在非setup語(yǔ)法糖下無(wú)法使用,但使用setup語(yǔ)法糖,就不支持Tsx了.為了優(yōu)雅,于是采取了一個(gè)折中的辦法:
可以看到,文件還是.vue文件,在script標(biāo)簽里使用了lang="tsx"與 setup語(yǔ)法糖,這樣做的好處是,定義了一個(gè)props的inferface,直接就可以在defineProps的泛型處使用,同時(shí)表示是否必要(required)只需要使用ts中的?(可選屬性)即可.默認(rèn)屬性可以通過(guò)withDefaults實(shí)現(xiàn):
最后
最下面還是用到了template標(biāo)簽仿佛有點(diǎn)自欺欺人,同時(shí)在這種寫(xiě)法下,vscode插件對(duì)于tsx標(biāo)簽的自動(dòng)補(bǔ)全并不友好,可能還需要更多的支持,但是這樣的props類型聲明確實(shí)更加優(yōu)雅,同時(shí)setup語(yǔ)法糖也是真香!
到此這篇關(guān)于如何在vue3中同時(shí)使用tsx與setup語(yǔ)法糖的文章就介紹到這了,更多相關(guān) vue3使用tsx與setup內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)img的src動(dòng)態(tài)賦值
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)img的src動(dòng)態(tài)賦值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue+jsplumb實(shí)現(xiàn)工作流程圖的項(xiàng)目實(shí)踐
本文主要介紹了vue+jsplumb實(shí)現(xiàn)工作流程圖的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了Vue頁(yè)面骨架屏注入的操作，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
vue3實(shí)現(xiàn)父組件提交校驗(yàn)多個(gè)子組件
這篇文章主要為大家詳細(xì)介紹了vue3如何實(shí)現(xiàn)父組件在提交事件中校驗(yàn)多個(gè)子組件中的form件,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2023-11-11
VUE中Echarts的resize事件報(bào)錯(cuò)和移除windows的事件問(wèn)題
這篇文章主要介紹了VUE中Echarts的resize事件報(bào)錯(cuò)和移除windows的事件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue項(xiàng)目中銷毀window.addEventListener事件監(jiān)聽(tīng)解析
這篇文章主要介紹了vue項(xiàng)目中銷毀window.addEventListener事件監(jiān)聽(tīng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
使用vue-i18n?入口文件配置控制臺(tái)報(bào)警問(wèn)題解決
這篇文章主要介紹了使用vue-i18n?入口文件配置控制臺(tái)報(bào)警問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
初學(xué)vue出現(xiàn)空格警告的原因及其解決方案
今天小編就為大家分享一篇初學(xué)vue出現(xiàn)空格警告的原因及其解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Vue的雙向數(shù)據(jù)綁定實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue的雙向數(shù)據(jù)綁定實(shí)現(xiàn)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue中van-picker的選項(xiàng)插槽的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01