一文掌握在Vue3中书写TSX的使用方法（vue3的setup函数）深度揭秘

文章摘要

这篇文章介绍了在Vue 3中使用TSX语法的各个方面，重点在于如何利用Vite插件快速配置和构建项目。文章首先提到TSX在Vue 3中的重要性，以及它相较于JSX的友好性和灵活性。接下来详细讲解了安装Vite TSX插件的过程，包括使用`npm install @vitejs/plugin-vue-jsx`命令，并配置Vite的`vite.config.ts`文件，确保插件正确运行。文章还深入探讨了TSX语法的特点，例如与JSX的区别，强调了某些无法使用JSX的特性，如`v-for`必须替换为`map`，`v-bind`替换为`{}`。此外，文章详细说明了如何在TSX中使用`props`和`emit`方法，展示了如何通过`v-model`实现双向绑定。这些内容帮助开发者更好地理解TSX的语法和使用场景。总的来说，文章通过实例和对比，生动地介绍了如何在Vue 3项目中高效使用TSX语法，帮助开发者提升代码扩展能力和项目维护性。

目录插件安装与文件配置tsx语法格式tsx语法注意事项

在vue2的时候就已经可以使用 jsx 语法，但是不是很友好，写起来是一件很痛苦的事情，所以你很少见到有人会在vue2中书写 jsx 语法，官方也不建议我们在vue2中进行书写 jsx 的代码风格：

但随着vue3版本的到来，对typescript的支持度越来越高，tsx语法也被大部分人越来越接收，所以很多项目都是搭配 Vue3 + TS 进行的，所以在vue3项目中懂得如何书写 tsx 风格的代码，对于代码扩展学习还是有必要的。接下来将详细介绍使用vite构建工具创建vue3项目的tsx具体使用：

终端执行如下命令进行相关插件的安装：

npm install @vitejs/plugin-vue-jsx -D

安装完成之后需要对配置文件 vite.config.ts 进行相关配置，如下：

import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
import vueJsx from ‘@vitejs/plugin-vue-jsx’
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),vueJsx()],
})

在vue3中创建后缀名为 .tsx 后缀的文件，其使用方法有如下三种方式，如果是学过React的朋友不难发现，vue3的一些语法是越来越像react了，这样的好处也是降低了学习react的成本。

返回渲染函数：

使用optionsApi方法：

使用setup函数模式：

在vue3中书写tsx语法的时候，有一些vue自带指令是不能使用的，如下进行简单的介绍：

map代替v-for：在tsx语法中不能使用v-for指令，需要使用map，这一点与react极其相似

import { defineComponent,ref } from “vue”;
export default defineComponent({
setup(){
const flag=ref(false)
const data=[
{name:’1′},
{name:’2′},
{name:’3′},
{name:’4′},
]
return ()=> (<>
<div v-if={flag.value}>张三</div>
{data.map((item)=>{
return <div>{item.name}</div>
})}
</>)
}
})

{}代替v-bind：在tsx语法中通过{}来代替v-bind的效果，如下：

props与emit的使用：使用tsx语法时也可以使用vue的props与emit语法，如下：

在子组件定义props数据，如下：

import { defineComponent,ref } from “vue”;
interface Props {
name?:string
}
export default defineComponent({
props:{
name:String
},
emits:[‘on-click’],
setup(props:Props){
const flag=ref(false)
const data=[
{name:’1′},
{name:’2′},
{name:’3′},
{name:’4′},
]
return ()=> (<>
<div>props:{props?.name}</div>
<hr />
<div v-if={flag.value}>张三</div>
{data.map((item)=>{
return <div class={item.name}>{item.name}</div>
})}
</>)
}
})
import { defineComponent,ref } from “vue”;
interface Props {
name?:string
}
export default defineComponent({
props:{
name:String
},
emits:[‘on-click’],
setup(props:Props){
const flag=ref(false)
const data=[
{name:’1′},
{name:’2′},
{name:’3′},
{name:’4′},
]
return ()=> (<>
<div>props:{props?.name}</div>
<hr />
<div v-if={flag.value}>张三</div>
{data.map((item)=>{
return <div class={item.name}>{item.name}</div>
})}
</>)
}
})

在父组件通过props传递数据，进行父向子传值，如下：

接下来开始使用emit函数实现子向父传值：

v-model的使用：

到此这篇关于一文掌握在Vue3中书写TSX的方法的文章就介绍到这了,更多相关vue3 TSX内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:一文掌握在Vue3中书写TSX的使用方法一文详解如何在Vue3中使用jsx/tsxVue3+Tsx给路由加切换动画时的踩坑及解决Vue3 SFC 和 TSX 方式自定义组件实现 v-model的详细过程详解Vue3?SFC?和?TSX?方式调用子组件中的函数如何在vue3中优雅的使用jsx/tsx详解如何在vue3中同时使用tsx与setup语法糖TSX常见简单入门用法之Vue3+Vitevue3.0实践之写tsx语法实例vue3+vite使用jsx和tsx详情