怎么样在Vue3中书写TSX

在vue2的时候就已经可以用 jsx 语法，但不是非常友好，写起来是一件非常痛苦的事情，所以你极少见到有人会在vue2中书写 jsx 语法，官方也不主张大家在vue2中进行书写 jsx 的代码风格：

但伴随vue3版本的到来，对typescript的支持度愈加高，tsx语法也被大多数人愈加接收，所以不少项目都是搭配 Vue3 + TS 进行的，所以在vue3项目中了解怎么样书写 tsx 风格的代码，对于代码扩展学习还是有必要的。下面将详细介绍用vite构建工具创建vue3项目的tsx具体用：

终端实行如下命令进行有关插件的安装：

npminstall@vitejs/plugin-vue-jsx-D

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

import{defineConfig}fromviteimportvuefrom@vitejs/plugin-vueimportvueJsxfrom@vitejs/plugin-vue-jsx//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),vueJsx()],})tsx语法格式

在vue3中创建后缀名为 .tsx 后缀的文件，其用法有如下三种方法，若是学过React的朋友不难发现，vue3的一些语法是愈加像react了，如此有哪些好处也是减少了学习react的本钱。

返回渲染函数：

用optionsApi办法：

用setup函数模式：

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

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

import{defineComponent,ref}fromvue;exportdefaultdefineComponent({setup(){constflag=ref(false)constdata=[{name:1},{name:2},{name:3},{name:4},]return()=(divv-if={flag.value}张三/div{data.map((item)={returndiv{item.name}/div})}/)}})

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

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

在子组件概念props数据，如下：

import{defineComponent,ref}fromvue;interfaceProps{name?:string}exportdefaultdefineComponent({props:{name:String},emits:[on-click],setup(props:Props){constflag=ref(false)constdata=[{name:1},{name:2},{name:3},{name:4},]return()=(divprops:{props?.name}/divhr/divv-if={flag.value}张三/div{data.map((item)={returndivclass={item.name}{item.name}/div})}/)}})import{defineComponent,ref}fromvue;interfaceProps{name?:string}exportdefaultdefineComponent({props:{name:String},emits:[on-click],setup(props:Props){constflag=ref(false)constdata=[{name:1},{name:2},{name:3},{name:4},]return()=(divprops:{props?.name}/divhr/divv-if={flag.value}张三/div{data.map((item)={returndivclass={item.name}{item.name}/div})}/)}})

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

templatetestname=张三//template

下面开始用emit函数达成子向父传值：

v-model的用法：