Vue3_25（TSX）

我们之前呢是使用Template去写我们模板。现在可以扩展另一种风格TSX风格
vue2 的时候就已经支持jsx写法，只不过不是很友好，随着vue3对typescript的支持度，tsx写法越来越被接受

1.安装插件

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()]
})

2.修改tsconfig.json 配置文件

"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",

配置完成就可以使用啦
在目录新建一个xxxxxx.tsx文件

3.使用TSX

tsx不会自动解包使用ref加.vlaue ! ! !

tsx支持 v-model 的使用

import { ref } from 'vue'
 
let v = ref('')
 
const renderDom = () => {
    return (
        <>
           
           
               {v.value}
           
        
    )
}

export default renderDom

v-show

import { ref } from 'vue'
 
let flag = ref(false)
 
const renderDom = () => {
    return (
        <>
           景天
           雪见
        
    )
}

export default renderDom

v-if是不支持的

所以需要改变风格

import { ref } from 'vue'
 
let flag = ref(false)
 
const renderDom = () => {
    return (
        <>
            {
                flag.value ? 景天
 : 雪见
            }
        
    )
}

export default renderDom

v-for也是不支持的

需要使用Map

import { ref } from 'vue'
 
let arr = [1,2,3,4,5]
 
const renderDom = () => {
    return (
        <>
            {
              arr.map(v=>{
                  return ${v}
              })
            }
        
    )
}

export default renderDom

v-bind使用

直接赋值就可以

import { ref } from 'vue'
 
let arr = [1, 2, 3, 4, 5]
 
const renderDom = () => {
    return (
        <>
            1
        
    )
}

export default renderDom

v-on绑定事件所有的事件都按照react风格来

所有事件由on开头
所有事件名称首字母大写

const renderDom = () => {
    return (
        <>
            
        
    )
}
 
const clickTap = () => {
    console.log('click');
}
 
export default renderDom

Props 接受值

import { ref } from 'vue'
 
type Props = {
    title:string
}
 
const renderDom = (props:Props) => {
    return (
        <>
            {props.title}
            
        
    )
}
 
const clickTap = () => {
    console.log('click');
}
 
export default renderDom

Emit派发

type Props = {
    title: string
}
 
const renderDom = (props: Props,content:any) => {
    return (
        <>
            {props.title}
            
        
    )
}
 
const clickTap = (ctx:any) => {
    ctx.emit('on-click',1)
}