解锁 Vue 项目中 TSX 配置与应用简单攻略
在 Vue 项目中配置 TSX 写法
在 Vue 项目中使用 TSX 可以为我们带来更灵活、高效的开发体验，特别是在处理复杂组件逻辑和动态渲染时。以下是详细的配置步骤：
一、安装相关依赖
首先，我们需要在命令行中输入以下命令来安装 @vitejs/plugin-vue-jsx 插件：
pnpm i @vitejs/plugin-vue-jsx -D
这里使用 pnpm 进行安装，如果使用的是 npm 或者 yarn，将命令中的 pnpm 替换为相应的包管理器命令即可。这个插件是用于在 Vite 项目中支持 Vue 的 JSX 语法。
二、Vite 配置
在 vite.config.js 文件中进行如下配置：
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'export default defineConfig({plugins: [vue(), vueJsx()]
})
三、Vite 配置
在 tsconfig.json 文件中，需要添加以下配置：
"compilerOptions": {"jsx": "preserve","jsxFactory": "h","jsxFragmentFactory": "Fragment",}
四、示例
//注意文件格式应该是tsx或jsx，这里由于csdn无法识别，所以代码格式写成js
import { defineComponent,ref } from 'vue'const MyComponent = defineComponent({setup() {const a=ref('helloworld!') return () => (<div><h1>{a.value}</h1></div>)}
})export default MyComponent
简单介绍Tsx
流程
vue编译时将tsx文件解析为typescript文件，然后编译为js文件，最后运行时解析js文件，将js文件解析为render function，通过h函数构建虚拟DOM
语法
1. v-model
// 注意tsx不会自动从ref中解析value
const message = ref<string>('Hello, World!');
<input type="text" v-model={message.value}/>//也可以
<input type="text" value={inputText.value}/>
2. v-show
<div v-show={message.value} >this is {message.value}</div>
3. v-if和v-else
使用三目运算符实现
<div>{message.value?'你输入了：'+message.value:'没有哦'}
</div>
4. 数组遍历v-for
使用map实现
<div>{arr.value.map((item,index)=>{return <div key={index}>{item}</div>})}
</div>
5. 绑定事件
如果不需要传参数，直接绑定
const count=ref<number>(0)
const handleClick=()=>{count.value++
}<div><button onClick={handleClick}>{count.value}</button>
</div>
如果需要传参
<button onClick={() => handleClick(count.value)}>{count.value}</button>
如果需要添加事件修饰符，使用驼峰写法将他们拼接在事件名后面
6. tsx中引入scss样式
- 新建样式文件 xx.module.scss，其中写样式
module意味着这个文件被当作模块来处理，生成的css类名会被局部化，自动加上唯一哈希值，防止类名冲突 - 文件中引入样式文件
import styles from '../styles/parent.module.scss'//对应的元素上添加类名
<div class={styles.red}>红色</div>
- 也可以直接简单的引入
import '../styles/parent.scss'
<div class="blue">蓝色</div>
7. 父子组件传参
// 父组件传参
<InputSelect options={options.value} v-model={formData.value.data}></InputSelect>//子组件接收参数
props:{modelValue:{type:Object,default:()=>({})},options:{type:Array}},setup(props){//...}