Vue--》如何在Vue3中书写TSX

news/2024/10/31 1:26:40/

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

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

目录

插件安装与文件配置

tsx语法格式

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>})}</>)}
})

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

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

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

v-model的使用


http://www.ppmy.cn/news/83579.html

相关文章

2023-05-25 最近的一个客户POC的反思

摘要: 最近在遇到一个客户的POC的问题,其中经历诸多有意思的事情, 有必要记录一下&#xff0c;以作为后续创业所要避免的地方。 客户POC出现的问题: 查询SQL中, 存在给查询到的列属性赋值的情况给属性的赋值的数据类型&#xff0c;和列属性的数据类型&#xff0c;不匹配&…

RabbitMQ 详细介绍与 Spring Boot 集成

RabbitMQ 详细介绍与 Spring Boot 集成 RabbitMQ 简介 RabbitMQ 是一个开源的消息队列系统&#xff0c;它实现了 AMQP&#xff08;Advanced Message Queuing Protocol&#xff09;协议。它被设计用于分布式系统中的消息通信&#xff0c;通过消息队列的方式实现异步通信&#…

今天面了个阿里拿 38K 出来的,让我见识到了测试界的天花板

一直觉得自己的技术已经很不错了&#xff0c;直到最近遇到了一个阿里来的大佬 5年测试&#xff0c;应该是能达到资深测试的水准&#xff0c;即不仅能熟练地开发业务&#xff0c;而且还能熟悉项目开发&#xff0c;测试&#xff0c;调试和发布的流程&#xff0c;而且还应该能全面…

小红书产品运营的书有哪些,爆款笔记的套路

随着小红书平台的规模逐渐扩大&#xff0c;已经不仅仅局限于单一的产业了&#xff0c;甚至于出现了多元化的一个现象。有关小红书运营的书的出版就是最好的证明。今天&#xff0c;就来和大家一起探讨一下小红书产品运营的书有哪些&#xff0c;爆款笔记的套路。 一、小红书运营的…

AI低代码,或将再次颠覆开发行业

IT行业最不缺少概念&#xff0c;大多数人也都是一知半解。AI的火爆&#xff0c;低代码的盛行&#xff0c;如今AIGC低代码、AI低代码、智能开发、AI生成式开发、AIGS(AI生成软件)等等呼之欲出&#xff0c; AIGC&#xff08;AI Generated Content&#xff0c;AI生成内容&#xff…

docker版jxTMS使用指南:python服务之jxLocalStore

本文讲解4.0版jxTMS中python服务的jxLocalStore模块&#xff0c; 整个系列的文章请查看&#xff1a;docker版jxTMS使用指南&#xff1a;4.0版升级内容 docker版本的使用&#xff0c;请参考&#xff1a;docker版jxTMS使用指南 jxLocalStore管理主目录下的local.pickle文件&…

Vue3中使用svg图标

文章目录 一、为什么要使用svg图标二、安装SVG依赖插件三、在vite.config.ts中配置插件四、入口文件导入五、svg封装为全局组件 一、为什么要使用svg图标 在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后&#xff0c;页面上加载的不再是图片资源, 这对页面性能来说是…

pyton打包成exe程序简易教程

我们知道&#xff0c;Python程序需要有python环境才能够运行的&#xff0c;但当我们开发出一个程序之后&#xff0c;给到用户 那么用户是不会去添加这个python环境的。 所以为了用户也能够正常使用&#xff0c;我们就需要将这个程序打包成exe程序。 1.打包之前需要先下载一个模…