当前位置：首页 > news >正文

【大前端】VUE使用TSX、JSX

news 2025/11/26 12:48:09

前言

在日常开发中，有时会遇到需要动态渲染组件的时候，比如：菜单栏，文件目录

而普通的VUE SFC + TS/JS 模式并不能满足，这个时候就需要TSX/JSX了，那么VUE怎么使用TSX/JSX了？

tsconfig.js/jsconfig.js

VUE CLI在创建项目时其实已经隐式的设置了JSX/TSX的配置和依赖，在使用时只需要在上方标题文件下加入如下配置即可

{"compilerOptions": {//....."jsx": "preserve","jsxImportSource": "vue",//.....}
}

使用方式

这里就不讲述`SX/TSX语法了，具体语法可以查看官方文档，这里只是讲下使用方法

vue 使用JSX/TSX有两种方式：

新建*.tsx/*.jsxTSX/JSX文件
使用 *.vue VUE模板文件

JSX/TSX文件

这种方法有个缺点就是不方便引入组件样式，官方提供的方式是通过CSS Module的方式，但CSS Module会更改编译后的类名，不方便代码调试，

如果不使用CSS Module，则组件的样式会失去scoped的安全性，成为全局样式，所以我不建议使用

export default defineComponent({setup() {// 遵循setup 语法return ()=>(<><MyComponent /></>)}
})

VUE 模板文件`（推荐）`

VUE 模板文件还是遵循官网的标准，只是把TS/JS语法换成了JSX/TSX语法格式而已，然后通过component动态组件实现组件的动态挂载和编译

这种方式的好处就是可以扩展性强，方便根据需要修改脚本语言和组件挂载

同时这种方式可以实现样式的scoped安全性，有利于代码调试

<template><!-- 这里使用vue 内置组件：component 动态组件 --><component :is="render()"></component>
</template><script lang="tsx" setup>function render() {//因为component组件的is属性值必须是一个模板字符串或者一个render函数，所以这里使用了<></>包裹组件return (<><MyComponent /></>);
}
</script><style lang="scss" scoped>
.component-class-name {}
</style>