一文掌握在Vue3中书写TSX的使用方法

更新时间：2023年05月14日 16:56:06 作者：亦世凡华、

但随着vue3版本的到来，对typescript的支持度越来越高，tsx语法也被大部分人越来越接收，所以很多项目都是搭配 Vue3 + TS 进行的，这篇文章主要介绍了一文掌握在Vue3中书写TSX的方法,需要的朋友可以参考下

但随着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()],
})

tsx语法格式

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

返回渲染函数：

使用optionsApi方法：

使用setup函数模式：

tsx语法注意事项

在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传递数据，进行父向子传值，如下：

<template>
  <test name="张三" />
</template>

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

v-model的使用：

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

您可能感兴趣的文章:

vue3
TSX

vue2基本响应式实现方式之让数组也变成响应式
这篇文章主要介绍了vue2基本响应式实现方式之让数组也变成响应式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue实现在进行增删改操作后刷新页面
这篇文章主要介绍了vue实现在进行增删改操作后刷新页面，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
Vue+Element+Springboot图片上传的实现示例
最近在学习前段后分离，本文介绍了Vue+Element+Springboot图片上传的实现示例，具有一定的参考价值，感兴趣的可以了解一下
2021-11-11
vue实现动态表单动态渲染组件的方式(2)
这篇文章主要为大家详细介绍了vue实现动态表单动态渲染组件的方式第二篇，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
浅谈vue项目打包优化策略
这篇文章主要介绍了浅谈vue项目打包优化策略，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
vue项目打包之开发环境和部署环境的实现
这篇文章主要介绍了vue项目打包之开发环境和部署环境的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
Vue 实用分页paging实例代码
本篇文章主要介绍了Vue 实用分页paging实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
vue2.0 axios前后端数据处理实例代码
本篇文章主要介绍了vue2.0 axios前后端数据处理实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
Vue自定义Hook实现简化本地存储
这篇文章主要为大家详细介绍了如何通过使用 Vue 3 的 Composition API 创建一个强大而灵活的自定义 Hook,简化了在 localStorage 或 sessionStorage 中管理数据的流程,需要的可以参考下
2023-12-12
封装一个更易用的Dialog组件过程详解
这篇文章主要为大家介绍了封装一个更易用的Dialog组件过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-05-05