Vue--"How to write TSX in Vue3

The jsx syntax can already be used in vue2, but it is not very friendly, and it is a painful thing to write, so you rarely see someone writing jsx syntax in vue2, and the official does not recommend that we do it in vue2 Code style for writing jsx:

But with the arrival of the vue3 version, the support for typescript is getting higher and higher, and the tsx syntax is becoming more and more accepted by most people, so many projects are carried out with Vue3 + TS, so you know how to write in vue3 projects tsx-style code is still necessary for code extension learning. Next, we will introduce in detail the specific use of tsx for creating Vue3 projects using the vite build tool:

Table of contents

Plug-in installation and file configuration

tsx syntax format

tsx syntax notes

---

Plug-in installation and file configuration

Execute the following command on the terminal to install the relevant plug-ins:

npm install @vitejs/plugin-vue-jsx -D

After the installation is complete, you need to configure the configuration file vite.config.ts , as follows:

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 syntax format

Create a file with a suffix of .tsx in vue3. There are three ways to use it. If you are a friend who has learned React, it is not difficult to find that some syntax of vue3 is more and more like react, and the benefits of this are also reduced. Reduced the cost of learning react.

Return to the render function :

Use the optionsApi method :

Use the setup function pattern :

tsx syntax notes

When writing tsx syntax in vue3, there are some instructions that come with vue that cannot be used, as follows:

map instead of v-for : the v-for instruction cannot be used in tsx syntax, and map needs to be used, which is very similar to 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>
      })}
    </>)
  }
})

{} instead of v-bind : In the tsx syntax, {} is used to replace the effect of v-bind, as follows:

The use of props and emit : When using tsx syntax, you can also use vue's props and emit syntax, as follows:

Define props data in subcomponents, as follows:

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

Pass data through props in the parent component, and pass values ​​from parent to child, as follows:

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

Next, start to use the emit function to realize the value transfer from the child to the parent:

Use of v-model :