如何在vue3中同时使用tsx与setup语法糖
前言
想这样做的原因是在vue3里使用tsx开发时,props的声明显得异常麻烦,不禁想到defineProps的便利,但同时在vue3里tsx文件里tsx语法的书写必须在setup函数或者render函数里,无法正常的使用defineProps等一系列的宏.为了能够更加便利,使用了下文的方法.
Tsx与setup语法糖的优势
目前,在vue3中使用tsx已经越来越流行且便捷,对于webpack与vite构建的项目,都有很好的插件支持.tsx带来的优势可能给我的感受最直接的就是更像是在写js代码.
同时,vue3的setup语法糖的便利也深入人心,不需要return,不需要声明components,并且提供了defineProps等等方便的宏.
遇到的问题
这是在用tsx编写vue组件时,遇到的props的问题,可以看到props的声明占据了大量篇幅,同时type的写法也比较复杂,如果在加上required字段,需要的篇幅会更大.
这样声明props的方式并不优雅,所以想起了setup语法糖下的defineProps函数.经过测试,defineProps在非setup语法糖下无法使用,但使用setup语法糖,就不支持Tsx了.为了优雅,于是采取了一个折中的办法:
可以看到,文件还是.vue文件,在script标签里使用了lang="tsx"与 setup语法糖,这样做的好处是,定义了一个props的inferface,直接就可以在defineProps的泛型处使用,同时表示是否必要(required)只需要使用ts中的?(可选属性)即可.默认属性可以通过withDefaults实现:
最后
最下面还是用到了template标签仿佛有点自欺欺人,同时在这种写法下,vscode插件对于tsx标签的自动补全并不友好,可能还需要更多的支持,但是这样的props类型声明确实更加优雅,同时setup语法糖也是真香!
到此这篇关于如何在vue3中同时使用tsx与setup语法糖的文章就介绍到这了,更多相关 vue3使用tsx与setup内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
当我们不想每次跳转路由都会重新加载页面时（重新加载页面很耗时）,就可以考虑使用keep-alive缓存页面了,这篇文章主要给大家介绍了关于vue3缓存页面keep-alive及路由统一处理的相关资料,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue中的过滤器及其时间格式化,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
在 Vue3 中,setup 函数是一个新引入的概念,它代替了之前版本中的 data、computed、methods 等选项,用于设置组件的初始状态和逻辑,本文将主要介绍Setup的基本用法和少量原理,感兴趣的朋友一起看看吧2024-02-02
这篇文章主要介绍了Vue动态获取数据后控件不可编辑问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
这篇文章主要介绍了element-plus一个vue3.xUI框架(element-ui的3.x 版初体验),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了vue+j简单的实现轮播效果,滚动公告,衔接,文章围绕主题的相关资料展开详细的内容具有一定的参考价值，需要的小伙伴可以参考一下2022-06-06
vue后端传文件流转化成blob对象,前端点击下载返回undefined问题
这篇文章主要介绍了vue后端传文件流转化成blob对象,前端点击下载返回undefined问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
最近开始入坑前端mapbox地图,跟大家一起慢慢深入学习,下面这篇文章主要给大家介绍了关于vue项目中使用mapbox地图切换底图的详细教程,文中给出了详细的实例代码,需要的朋友可以参考下2023-04-04
在vue3中使用el-tree-select实现树形下拉选择器效果
el-tree-select是一个含有下拉菜单的树形选择器,结合了 el-tree 和 el-select 两个组件的功能,这篇文章主要介绍了在vue3中使用el-tree-select做一个树形下拉选择器,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue 如何绑定disabled属性让其不能被点击，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论