在 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){
//...
}
