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