本篇介绍在vue3中使用tsx的使用方法，之前博主有一篇根据路由生成菜单的文章，里面也介绍了jsx语法的基本使用：vue3+jsx使用递归组件实现无限级菜单
本篇聚焦于vue3中使用tsx，从基础语法到复杂使用，再到一些特殊情况的处理方法，并且对照传统template写法，目的是覆盖日常开发的全部使用。本篇主要是总结tsx的使用，至于跟template写法的优劣以及原理，博主不会深入。
1.在项目中使用
安装与配置
首先要安装插件：
npm insatll @vue/babel-plugin-jsx --save
这是这个插件的github：babel-plugin-jsx
在github可以学到一些基础用法
安装完后在项目的 babel.config.js 文件的plugins中添加配置：
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
'@vue/babel-plugin-jsx'
]
}
vue3的tsx文件基本结构
到这一步就配置好了，接下来看在组件中怎么使用：
tsx文件就相当一个ts文件，里面都是ts代码，不能像vue文件一样出现html和css，我们在tsx文件中返回一个组件
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
return () => {
return <div>
hello tsx
</div>
}
}
})
setup如果返回一个函数，那么这个函数就是render函数，然后在render函数中返回我们的组件模板也就是html，然后setup里面的其他东西与使用vue文件一模一样，所以tsx文件在用法上可以理解就是将template转移到render函数中。
2.基本语法对照vue文件写法
defineComponent与setup基本结构
上面说到tsx写法上就是把template转移到render函数中，defineComponent的其他配置，与setup其他参数与用法无区别：
import { defineComponent, ref, reactive } from 'vue'
export default defineComponent({
props: {
},
setup(props) {
const msg = ref('hello tsx')
const state = reactive({
count: 1
})
return () => {
return <div>
{msg.value} <span>{state.count}</span>
</div>
}
}
})
render函数中的模版可以直接使用整个文件的变量，通过上面的代码可以看到，tsx使用变量是使用一个 {} ，只要在tsx想使用任何非字符串的代码，都需要用 {} 包裹，包括数字、布尔、函数表达式等
指令
bind:
vue文件：
<com :data="data"></com>
tsx文件：
<com data={data}></com>
这里表示传递给子组件的数据，顺便说一下引入组件写法的区别
vue文件， 需要注册，且在template中可以将驼峰换成中划线：
import TestCom from './test-com.vue'
export default defineComponent({
components: {
TestCom
}
})
在template中：
<template>
<test-com></test-com>
</template>
在tsx文件，不需要注册，且不能修改名称:
import TestCom from './test-com.vue'
export default defineComponent({
setup(){
return () => {
return <TestCom></TestCom>
}
}
})
v-if
vue文件：
<div v-if="flag"></div>
tsx文件，js逻辑代码必须用大括号包裹：
{
flag ? <div></div> : null
}
v-show
vue文件：
<div v-show="flag"></div>
tsx文件，插件已处理，可以直接使用：
<div v-show={flag}></div>
v-for
vue文件：
<ul>
<li v-for="item in list" :key="item">{{item}}</li>
</ul>
tsx文件：
<ul>
{
list.map((item) => {
return <li key={item}>{item}</li>
})
}
</ul>
v-model
v-model普通用法
vue文件：
<input v-model="keyword" />
tsx文件：
<input v-model={keyword} />
v-model传递参数
vue2.0可以用v-bind.sync来做组件的数据的双向绑定，vue3移除了这个语法，改用了v-model的写法，先来看看在vue文件中2.0和3.0的区别：
2.0
<ChildComponent :title.sync="pageTitle" />
然后在子组件里面使用：
this.$emit('update:title', newValue)
就可以更新父组件传递的值
3.0
<ChildComponent v-model="pageTitle" />
在子组件里面会接收到一个modelValue（默认名称）的变量
同样：
this.$emit('update:modelValue', newValue)
就可以更新父组件pageTitle的值
如果不想使用默认名称modelValue，就可以传递参数:
<ChildComponent v-model:pageTitle="pageTitle" />
子组件接收到的props就有一个pageTitle的变量
tsx文件写法：
<ChildComponent v-model={[pageTitle, 'pageTitle']} />
传递一个数组，第一项为传递的值，第二项为子组件接收的名称
在子组件里面想更新就：
emit('update:pageTitle', newValue)
这个vue文件tsx文件无区别
v-model修饰符
vue文件
<input v-model.trim="keyword" />
tsx文件
<input v-model={[keyword, ['trim']]} />
传递一个数组，第一项为传递的值，第二项为修饰器名称
vue3可以利用这个修饰符结合上面的传递参数实现一些功能，下面是官网链接：
处理v-model修饰符
一般是与子组件数据双向绑定时配合使用，具体功能看上面的官方文档，下面介绍一下在tsx中怎么使用：
vue文件：
<ChildComponent v-model.custom:pageTitle="pageTitle" />
tsx文件：
<ChildComponent v-model={[pageTitle, ['custom'], 'pageTitle']} />
传递一个数组，数组第一项为传递的数据，第二项也是一个数组，传入修饰符名称，第三项是子组件接收的名称
事件监听
基本对照
vue文件：
<div @click="handleClick"></div>
tsx文件：
<div onClick={handleClick}></div>
由v-on变成on+事件类型，首字母大写
传递参数
vue文件：
<div @click="handleClick(1,2)"></div>
tsx文件：
<div onClick={() => { handleClick(1,2) }}></div>
需要声明一个匿名函数，只能接收函数定义
监听自定义事件ts报错处理
在子组件中emit一个事件，父组件用v-on来接收，vue文件：
子组件:
emit('custom')
父组件：
<ChildComponent @custom="handleCustom" />
tsx文件：
子组件:
emit('custom')
父组件：
<ChildComponent onCustom={handleCustom} />
但是此时tsx会将 onCustom 当成一个prop传入，会报 “与子组件props类型不一致” 的错误
处理方法就是在子组件的props中定义emit的函数名称：
子组件：
props: {
onCustom: {
type: Function
}
}
处理事件冒泡
vue文件：
<div @click.stop="handleClick"></div>
tsx中没有事件修饰符，只能通过原生写法来处理
<div onClick={handleClick}></div>
const handleClick = (e: MouseEvent) => {
e.stopPropagation()
}
处理回车事件
vue文件：
<input @keyup.enter="search" />
tsx文件，通过监听键盘事件来实现：
<input onKeypress={search} />
const search = (e: any) => {
if (e.keyCode === 13) {
//
}
}
样式相关
文件引入
tsx文件直接在文件里面引入样式文件
import './style.css'
但这样没有vue文件的scoped，容易造成样式冲突，如果项目是中小型的，可以通过将顶部类型写复杂来规避，通常为：模块名+文件名+组件名来命名顶部元素的claas，例如：
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
return () => {
return <div class="moudle-file-component-wrapper">
</div>
}
}
})
目前博主是使用这种方式来处理，在迭代了一年的系统里面并没感觉不便
如果要保险规避，达到vue文件scoped的效果，可以参考博主之前的一篇文章：
vue3+ts jsx写法css module处理方案
动态class写法
vue文件：
<div class="box" :class="{active: count === 1}"></div>
tsx文件：
<div class={['box', count===1 ? 'active' : '']}></div>
class名称集合换成一个数组
顺便说下动态style的：
<div style={{width: count + 'px'}}></div>
style是一个对象，处理js代码要用大括号，所以有两层大括号
调用组件方法
ref 引用组件
vue文件：
<ChildComponent ref="com" />
... js
setup() {
const com = ref<any>(null)
onMount(() => {
console.log(com.value)
})
return {
com
}
}
tsx文件：
setup() {
const com = ref<any>(null)
onMount(() => {
console.log(com.value)
})
return () => {
return <ChildComponent ref={com} />
}
}
注意引用的时候没有 .value，引用dom普通元素也是一样的写法
render配置写法暴露组件方法
上面已经引用了组件，这种场景无非就是调用子组件里面的方法，那要成功调用自组件就得暴露方法，在vue文件里面非常简单，就是在setup里面return就行：
setup(){
return {
fn1,
fn2
}
}
这样父组件用ref引用后就可以直接调用
那在tsx文件中怎么暴露呢，setup已经返回了一个render函数，里面返回我们的组件模版，处理方法就是将render函数和setup拆开，让setup可以正常返回方法。
那我们的模版改写在哪呢，其实setup返回一个函数就是render函数只是vue提供了一种便捷的方式，让我们可以在模版中快速使用setup中定义的变量，真正的render函数是和setup同级的，同属于 defineComponent 配置的一个属性，下面我分别写出setup返回render函数与单独编写render函数的写法：
setup返回函数写法：
import { defineComponent, ref, reactive } from 'vue'
export default defineComponent({
props:{
name: {
type: String,
default: '超人鸭'
}
},
setup(props) {
const msg = ref('hello tsx')
const state = reactive({
count: 1
})
const handleClick = () => {
console.log('click')
}
return () => {
return <div onClick={handleClick}>
{msg.value}
<span>{state.count}</span>
<span>{props.name}</span>
</div>
}
}
})
单独编写render函数写法：
import { defineComponent, ref, reactive } from 'vue'
export default defineComponent({
props:{
name: {
type: String,
default: '超人鸭'
}
},
setup(props) {
const msg = ref('hello tsx')
const state = reactive({
count: 1
})
const handleClick = () => {
console.log('click')
}
return {
msg,
state,
handleClick
}
},
render() {
return <div onClick={this.handleClick}>
{this.msg.value}
<span>{this.state.count}</span>
<span>{this.name}</span>
</div>
}
})
setup中的变量要return，render中使用要使用this，props数据会和组件属性结合，所以直接使用this使用。
这样在setup中return后，父组件使用ref引用这个组件就可以调用setup中返回的方法，例如上面的handleClick
render写法使用ref引用组件
有这样一个场景，父组件有一个子组件，里面放着一个element-ui的table，此时父组件想要去触发element-ui的table的方法，比如清空筛选、清空排序等。
基于上面，我们在子组件里面要使用ref引用el-table组件，然后在setup里面暴露一个方法，所以要使用render函数写法。
在render函数中使用ref变量引用组件，写法会有点违背常规思路，这个问题是我使用tsx被坑得最厉害的问题
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const elTableCom = ref<any>(null)
const handle = () => {
console.log('click')
}
return {
handle,
elTableCom
}
},
render() {
return <div>
<el-table ref="elTableCom"></el-table>
</div>
}
})
不用 this , 不用大括号，直接字符串引用🧐🧐🧐
其他细节
占位标签
在vue文件里，template可以当作一个站位标签，不会渲染成什么，且vue3也不要求组件需要一个根标签。
但是tsx要求必须有一个根标签包裹，如果不想要这个根标签可以使用：
setup() {
return () => {
return <>
<div></div>
<div></div>
</>
}
}
递归组件
vue文件使用递归组件是通过name属性来引用自己：
<template>
<test-com></test-com>
</template>
<script>
import {defineComponent} from 'vue'
export default defineComponent({
name: 'TestCom'
})
</script>
注意使用v-if结束递归
tsx文件使用引用变量的方式
import {defineComponent} from 'vue'
const TestCom = defineComponent({
setup() {
return () => {
return <TestCom></TestCom>
}
}
})
export default TestCom
同样记得使用判断结束递归
3.插槽
插槽应该是tsx语法中最复杂的，所以单独提出来介绍
父组件中插入内容至子组件的插槽
先用vue文件写一个子组件，并且在这个组件中定义默认插槽、具名插槽、作用域插槽三种插槽：
<template>
<div>
<p>子组件</p>
<!-- 这是默认插槽 -->
<slot></slot>
<!-- 这是具名插槽 -->
<slot name="chaoren"></slot>
<!-- 这是作用域插槽 -->
<slot name="ya" :list="list"></slot>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
setup() {
const state = reactive({
list: ['超人', '鸭']
})
return {
...toRefs(state)
}
}
})
</script>
vue文件中使用
父组件使用默认插槽：
<template>
<div>
<p>父组件</p>
<children>
<p>父组件插入内容至子组件：默认插槽</p>
</children>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import children from './children.vue'
export default defineComponent({
components: {
children
},
setup() {
const state = reactive({
})
return {
...toRefs(state)
}
}
})
</script>
任何没有使用具名插槽的元素都会被渲染至默认插槽中
效果：
父组件使用具名插槽：
<template>
<div>
<p>父组件</p>
<children>
<p>父组件插入内容至子组件：默认插槽</p>
<template v-slot:chaoren>
<p>父组件插入内容至子组件：具名插槽</p>
</template>
</children>
</div>
</template>
效果：
其实默认插槽也有一个名字，叫做 default ,所以使用默认插槽也可以写成：
<template>
<div>
<p>父组件</p>
<children>
<template v-slot:default>
<p>父组件插入内容至子组件：默认插槽</p>
</template>
<template v-slot:chaoren>
<p>父组件插入内容至子组件：具名插槽</p>
</template>
</children>
</div>
</template>
父组件作用域插槽：
<template>
<div>
<p>父组件</p>
<children>
<template v-slot:default>
<p>父组件插入内容至子组件：默认插槽</p>
</template>
<template v-slot:chaoren>
<p>父组件插入内容至子组件：具名插槽</p>
</template>
<template v-slot:ya="scope">
<p>父组件插入内容至子组件：作用域插槽</p>
<p v-for="item in scope.list" :key="item">{{item}}</p>
</template>
</children>
</div>
</template>
效果：
作用域插槽其实就是一个具名插槽，然后传递数据给父组件，父组件可以用这些数据拿去做自定义渲染。
父组件在拿这个数据的时候，拿到的是包裹着传递数据的对象，因为子组件可以传递很多数据，也就是上面代码的：
<template v-slot:ya="scope">
这个 scope 就代表着包裹数据的对象，可以随便命名。
在tsx文件中使用
还是基于上面的children组件，同时包含默认插槽，具名插槽，作用域插槽，下面展示一下一起用这三种插槽的写法：
import { defineComponent } from 'vue'
import Children from './children.vue'
export default defineComponent({
setup() {
const childrenSlot = {
default: () => {
return <p>父组件插入内容至子组件：默认插槽</p>
},
chaoren: () => {
return <p>父组件插入内容至子组件：具名插槽</p>
},
ya: (scope: any) => {
return <>
<p>父组件插入内容至子组件：作用域插槽</p>
{
scope.list.map((item: any) => {
return <p key={item}>{item}</p>
})
}
</>
}
}
return () => {
return <div>
<p>父组件</p>
<Children v-slots={childrenSlot}>
</Children>
</div>
}
}
})
tsx文件使用插槽是传入一个对象，每一个插槽都是一个方法，里面返回要渲染的dom，如果是作用域插槽，传递的数据会在方法的参数里面。效果：
tsx编写子组件定义插槽
上面的子组件使用vue文件写的，下面看一下在tsx文件中如果定义插槽，供父组件使用：
import { defineComponent, reactive } from 'vue'
export default defineComponent({
setup(props, { slots }) {
const state = reactive({
list: ['超人', '鸭']
})
return () => {
return <div>
<p>子组件</p>
{/* 这是默认插槽 */}
{
slots.default ? slots.default() : null
}
{/* 这是具名插槽 */}
{
slots.chaoren ? slots.chaoren() : null
}
{/* 这是作用域插槽 */}
{
slots.ya ? slots.ya({ list: state.list }) : null
}
</div>
}
}
})
setup的第二个参数是一个上下文对象，可能平时用的最多的就是emit，他其中还有 slot 这个参数，我觉得就是专门为jsx文件准备的，其实通过上面tsx文件父组件使用子组件插槽时就可以发现，vue在处理插槽时其实是传入一个函数，这个函数返回要渲染的dom，所以上面的子组件就是将外部传入的函数进行执行，渲染传进来的dom。
父组件引用：
import { defineComponent } from 'vue'
import Children from './children'
export default defineComponent({
setup() {
const childrenSlot = {
default: () => {
return <p>父组件插入内容至子组件：默认插槽</p>
},
chaoren: () => {
return <p>父组件插入内容至子组件：具名插槽</p>
},
ya: (scope: any) => {
return <>
<p>父组件插入内容至子组件：作用域插槽</p>
{
scope.list.map((item: any) => {
return <p key={item}>{item}</p>
})
}
</>
}
}
return () => {
return <div>
<p>父组件</p>
<Children v-slots={childrenSlot}>
</Children>
</div>
}
}
})
效果：
一致。
4.结语
到这里就是博主介绍tsx用法的全部内容，当然后面如果发现有遗漏还会再来补充，欢迎大家指教。
博主微信：Promise_fulfilled
