如何在vue3中同時使用tsx與setup語法糖
前言
想這樣做的原因是在vue3里使用tsx開發(fā)時,props的聲明顯得異常麻煩,不禁想到defineProps的便利,但同時在vue3里tsx文件里tsx語法的書寫必須在setup函數(shù)或者render函數(shù)里,無法正常的使用defineProps等一系列的宏.為了能夠更加便利,使用了下文的方法.
Tsx與setup語法糖的優(yōu)勢
目前,在vue3中使用tsx已經(jīng)越來越流行且便捷,對于webpack與vite構(gòu)建的項目,都有很好的插件支持.tsx帶來的優(yōu)勢可能給我的感受最直接的就是更像是在寫js代碼.
同時,vue3的setup語法糖的便利也深入人心,不需要return,不需要聲明components,并且提供了defineProps等等方便的宏.
遇到的問題
這是在用tsx編寫vue組件時,遇到的props的問題,可以看到props的聲明占據(jù)了大量篇幅,同時type的寫法也比較復(fù)雜,如果在加上required字段,需要的篇幅會更大.
這樣聲明props的方式并不優(yōu)雅,所以想起了setup語法糖下的defineProps函數(shù).經(jīng)過測試,defineProps在非setup語法糖下無法使用,但使用setup語法糖,就不支持Tsx了.為了優(yōu)雅,于是采取了一個折中的辦法:
可以看到,文件還是.vue文件,在script標(biāo)簽里使用了lang="tsx"與 setup語法糖,這樣做的好處是,定義了一個props的inferface,直接就可以在defineProps的泛型處使用,同時表示是否必要(required)只需要使用ts中的?(可選屬性)即可.默認屬性可以通過withDefaults實現(xiàn):
最后
最下面還是用到了template標(biāo)簽仿佛有點自欺欺人,同時在這種寫法下,vscode插件對于tsx標(biāo)簽的自動補全并不友好,可能還需要更多的支持,但是這樣的props類型聲明確實更加優(yōu)雅,同時setup語法糖也是真香!
到此這篇關(guān)于如何在vue3中同時使用tsx與setup語法糖的文章就介紹到這了,更多相關(guān) vue3使用tsx與setup內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
如何通過Vue自帶服務(wù)器實現(xiàn)Ajax請求跨域(vue-cli)
從A頁面訪問到B頁面,并且要獲取到B頁面上的數(shù)據(jù),而兩個頁面所在的端口、協(xié)議和域名中哪怕有一個不對等,那么這種行為就叫跨域,這篇文章給大家介紹如何通過Vue自帶服務(wù)器實現(xiàn)Ajax請求跨域(vue-cli),感興趣的朋友一起看看吧2023-10-10
當(dāng)一個較復(fù)雜的vue項目打包后，文件會非常大，而且訪問時資源加載速度很慢，本文介紹了幾種措施來優(yōu)化。2020-09-09
這篇文章主要介紹了解決Vue2.x父組件與子組件之間的雙向綁定問題,需要的朋友可以參考下2018-03-03
這篇文章主要為大家詳細介紹了vue+elementUI配置表格的列顯示與隱藏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue3組件化開發(fā)之可復(fù)用性的應(yīng)用實例詳解
不斷把公共的、可以獨立拆分出來的抽出來作為一個獨立可復(fù)用的組件來向上提供調(diào)用,這樣讓我們的代碼更加方便組織和管理,并且擴展性也更強,下面這篇文章主要給大家介紹了關(guān)于vue3組件化開發(fā)之可復(fù)用性應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-06-06
今天小編就為大家分享一篇Vue實現(xiàn)頁面添加水印功能，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue?底部footer導(dǎo)航組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了Vue實現(xiàn)本地購物車功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
Vuex是專門為Vuejs應(yīng)用程序設(shè)計的狀態(tài)管理工具,這篇文章主要給大家介紹了關(guān)于Vuex狀態(tài)機快速了解與實例應(yīng)用的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要介紹的是深入理解Vue的插件機制與install，文章主要是講解install函數(shù)可以做些什么、install內(nèi)部是怎么實現(xiàn)的、 Vuex，Vue-Router插件在install期間到底干了什么,需要的小伙伴可以參考一下2021-09-09