【大前端】VUE使用TSX、JSX

前言

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

而普通的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有两种方式：

1. 新建*.tsx/*.jsxTSX/JSX文件
2. 使用 *.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>