tsx开发vue3：从零到全面覆盖

本篇介绍在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 

        hello tsx
      
    }
  }
})

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 

        {msg.value} {state.count}
      
    }
  }
})

render函数中的模版可以直接使用整个文件的变量，通过上面的代码可以看到，tsx使用变量是使用一个 {} ，只要在tsx想使用任何非字符串的代码，都需要用 {} 包裹，包括数字、布尔、函数表达式等

指令

bind:

vue文件：


tsx文件：

这里表示传递给子组件的数据，顺便说一下引入组件写法的区别
vue文件， 需要注册，且在template中可以将驼峰换成中划线：

import TestCom from './test-com.vue'
export default defineComponent({
  components: {
    TestCom
  }
})

在template中：

在tsx文件，不需要注册，且不能修改名称:

import TestCom from './test-com.vue'
export default defineComponent({
  setup(){
    return () => {
      return 
    }
  }
})

v-if

vue文件：


tsx文件，js逻辑代码必须用大括号包裹：
{
  flag ? 
 : null
}

v-show

vue文件：


tsx文件，插件已处理，可以直接使用：

v-for

vue文件：

  
{{item}}


tsx文件：

  {
    list.map((item) => {
      return 
{item}
    })
  }

v-model

v-model普通用法

vue文件：


tsx文件：

v-model传递参数

vue2.0可以用v-bind.sync来做组件的数据的双向绑定，vue3移除了这个语法，改用了v-model的写法，先来看看在vue文件中2.0和3.0的区别：

2.0


然后在子组件里面使用：
this.$emit('update:title', newValue)
就可以更新父组件传递的值

3.0

在子组件里面会接收到一个modelValue（默认名称）的变量
同样：
this.$emit('update:modelValue', newValue)
就可以更新父组件pageTitle的值

如果不想使用默认名称modelValue，就可以传递参数:

子组件接收到的props就有一个pageTitle的变量

tsx文件写法：

传递一个数组，第一项为传递的值，第二项为子组件接收的名称

在子组件里面想更新就：
emit('update:pageTitle', newValue)
这个vue文件tsx文件无区别

v-model修饰符

vue文件


tsx文件

传递一个数组，第一项为传递的值，第二项为修饰器名称

vue3可以利用这个修饰符结合上面的传递参数实现一些功能，下面是官网链接：
处理v-model修饰符
一般是与子组件数据双向绑定时配合使用，具体功能看上面的官方文档，下面介绍一下在tsx中怎么使用：

vue文件：


tsx文件：

传递一个数组，数组第一项为传递的数据，第二项也是一个数组，传入修饰符名称，第三项是子组件接收的名称

事件监听

基本对照

vue文件：


tsx文件：

由v-on变成on+事件类型，首字母大写

传递参数

vue文件：


tsx文件：
 { handleClick(1,2) }}>

需要声明一个匿名函数，只能接收函数定义

监听自定义事件ts报错处理

在子组件中emit一个事件，父组件用v-on来接收，vue文件：

子组件:
emit('custom')

父组件：

tsx文件：

子组件:
emit('custom')

父组件：

但是此时tsx会将 onCustom 当成一个prop传入，会报 “与子组件props类型不一致” 的错误
处理方法就是在子组件的props中定义emit的函数名称：

子组件：
props: {
  onCustom: {
    type: Function
  }
}

处理事件冒泡

vue文件：


tsx中没有事件修饰符，只能通过原生写法来处理


const handleClick = (e: MouseEvent) => {
  e.stopPropagation()
}

处理回车事件

vue文件：


tsx文件，通过监听键盘事件来实现：


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 

      
    }
  }
})

目前博主是使用这种方式来处理，在迭代了一年的系统里面并没感觉不便

如果要保险规避，达到vue文件scoped的效果，可以参考博主之前的一篇文章：
vue3+ts jsx写法css module处理方案

动态class写法

vue文件：


tsx文件：

class名称集合换成一个数组

顺便说下动态style的：

style是一个对象，处理js代码要用大括号，所以有两层大括号

调用组件方法

ref 引用组件

vue文件：


... js
setup() {
  const com = ref(null)
  
  onMount(() => {
    console.log(com.value)
  })
  
  return {
    com
  }
}

tsx文件：
setup() {
  const com = ref(null)
  onMount(() => {
    console.log(com.value)
  })

  return () => {
    return 
  }
}

注意引用的时候没有 .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 

        {msg.value} 
        {state.count}
        {props.name}
      
    }
  }
})

单独编写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 

        {this.msg.value} 
        {this.state.count}
        {this.name}
    
  }
})

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(null)

    const handle = () => {
      console.log('click')
    }

    return {
      handle,
      elTableCom
    }
  },
  render() {
    return 

       
    
  }
})

不用 this , 不用大括号，直接字符串引用

其他细节

占位标签

在vue文件里，template可以当作一个站位标签，不会渲染成什么，且vue3也不要求组件需要一个根标签。
但是tsx要求必须有一个根标签包裹，如果不想要这个根标签可以使用：

setup() {
  return () => {
    return <>
      

      

    
  }
}

递归组件

vue文件使用递归组件是通过name属性来引用自己：

注意使用v-if结束递归

tsx文件使用引用变量的方式

import {defineComponent} from 'vue'
const TestCom =  defineComponent({
  setup() {
    return () => {
      return 
    }
  }
})

export default TestCom

同样记得使用判断结束递归

3.插槽

插槽应该是tsx语法中最复杂的，所以单独提出来介绍

父组件中插入内容至子组件的插槽

先用vue文件写一个子组件，并且在这个组件中定义默认插槽、具名插槽、作用域插槽三种插槽：

vue文件中使用

父组件使用默认插槽：

任何没有使用具名插槽的元素都会被渲染至默认插槽中

效果：

image.png

父组件使用具名插槽：

效果：

image.png

其实默认插槽也有一个名字，叫做 default ,所以使用默认插槽也可以写成：

父组件作用域插槽：

效果：

image.png

作用域插槽其实就是一个具名插槽，然后传递数据给父组件，父组件可以用这些数据拿去做自定义渲染。
父组件在拿这个数据的时候，拿到的是包裹着传递数据的对象，因为子组件可以传递很多数据，也就是上面代码的：