00：先下載

　　yarn add @vitejs/plugin-vue-jsx -D

　　01：引入

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

　　02：tsconfig.json 配置文件

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

　　上述代碼配置就是可以使用ts.

　　首先進行測試tsx，新建一個App.tsx頁面，接下來就可以進行App.vue文件之中引入使用。

　　<template>
　　<!-- <Layout></Layout> -->
　　<renderDom />
　　</template>
　　<script setup>
　　// import Layout from './layout/Layout.vue'
　　import renderDom from './App.tsx'
　　</script>
　　<style>
　　html,
　　body,
　　#app {
　　height: 100%;
　　width: 100%;
　　overflow: hidden;
　　}
　　</style>

　　tsx使用v-model指令 (App.tsx組件)

　　import { ref } from "vue"
　　let test = ref<string>("")
　　const renderDom = () => {
　　// 注意點：在tsx之中 不會自動讀寫 X.value
　　return (
　　<div>
　　<input type="text" v-model={test.value} />
　　<div>我是{test.value }</div>
　　</div>
　　)
　　}
　　export default renderDom

　　效果

　　使用v-show、與三目運算符

　   記住，tsx是支持v-show指令，tsx不支持v-if、v-else指令，因此，需要用到三目運算符了。

　　import { ref } from "vue"
　　let flag = ref<Boolean>(true)
　　const renderDom = () => {
　　// 注意點：在tsx之中 不會自動讀寫 X.value
　　return (
　　<div>
　　<div v-show={flag}>我是true</div>
　　<div v-show={!flag}>我是flase</div>
　　<div>
　　{
　　flag ? <div>我是true</div> : <div>我是flase</div>
　　}
　　</div>
　　</div>
　　)
　　}
　　export default renderDom

　　效果

　　tsx之數組的遍歷(map)

　　tsx是不支持 v-for指令的

　　使用map的方式去遍歷數組，然后map函數之中返回一個 div等標簽渲染dom節點

　　import { reactive, ref } from "vue"
　　let arr = reactive<Number[]>([1,2,3])
　　const renderDom = () => {
　　return (
　　<div>
　　<div>
　　{
　　arr.map((item,idx)=>{
　　return(
　　<div key={idx}>{ item }</div>
　　)
　　})
　　}
　　</div>
　　</div>
　　)
　　}
　　export default renderDom

　　效果

　　自定義屬性 data-index

　　給當前標簽自定義屬性用于數據的傳遞

　　import { reactive, ref } from "vue"
　　let arr = reactive<Number[]>([1,2,3])
　　const renderDom = () => {
　　return (
　　<div>
　　<div>
　　{
　　arr.map((item,idx)=>{
　　return(
　　<div key={idx} data-index={idx}>{ item }</div>
　　)
　　})
　　}
　　</div>
　　</div>
　　)
　　}
　　export default renderDom

　　效果

　　tsx綁定事件

　　使用onClick定義事件

　　不傳遞參數的時候，直接定義這個click事件即可

　　若是傳遞參數的時候，需要使用bind來改變this的指向，并且不自覺調用函數，而是返回一個新的函數，可以傳遞參數，等待點擊的時候觸發事件

　　import { reactive, ref } from "vue"
　　let arr = reactive<Number[]>([1,2,3])
　　const renderDom = () => {
　　return (
　　<div>
　　<div>
　　{
　　arr.map((item,idx)=>{
　　return(
　　// <div key={idx} data-index={idx} onClick={TestClick}>{ item }</div> // 沒有傳參
　　// <div key={idx} data-index={idx} onClick={TestClick()}>{ item }</div> // 直接調用
　　<div key={idx} data-index={idx} onClick={TestClick.bind(this,item)}>{ item }</div>
　　)
　　})
　　}
　　</div>
　　</div>
　　)
　　}
　　const TestClick = (item)=>{
　　console.log("111",item);
　　}
　　export default renderDom

　　tsx之 props父組件向子組件傳遞參數

　　App.vue 父

　　再vue之中，使用 v-bind的形式傳遞數據

　　<template>
　　<renderDom :title="title" />
　　</template>
　　<script setup>
　　import { ref } from 'vue'
　　import renderDom from './App.tsx'
　　let title = ref<String>('我是測試的t')
　　</script>

　　App.tsx 子

　　import { reactive, ref } from "vue"
　　type Props = {
　　title : string
　　}
　　const renderDom = (props:Props) => {
　　return (
　　<div>
　　<div>我是title - { props.title }</div>
　　</div>
　　)
　　}
　　export default renderDom

　　效果

　　tsx之子組件 向父組件 傳遞數據

　　點擊11 傳遞當前11數據

　　子組件 App.tsx

　　import { reactive, ref } from "vue"
　　type Props = {
　　title : string
　　}
　　let arr = reactive<number[]>([11,22,33])
　　// props是接受父組件傳遞來的值，ctx：為上下文對象
　　const renderDom = (props:Props,ctx:any) => {
　　return (
　　<div>
　　<div>我是title - { props.title }</div>
　　<div>
　　{
　　arr.map((item,idx)=>{
　　return (
　　<div onClick={ itemClick.bind(this,ctx,item) }>{ item }</div>
　　)
　　})
　　}
　　</div>
　　</div>
　　)
　　}
　　// 點擊事件
　　const itemClick = (ctx:any,item:any)=>{
　　ctx.emit("on-click",item) // 使用ctx之中的emit發射事件，給父組件傳遞數據
　　}
　　export default renderDom

　　App.vue 父

　　<template>
　　<!-- <Layout></Layout> -->
　　<renderDom :title="title" @on-click="getData" />
　　</template>
　　<script setup>
　　// import Layout from './layout/Layout.vue'
　　import { ref } from 'vue'
　　import renderDom from './App.tsx'
　　let title = ref<String>('我是測試的t')
　　// 接受子組件 自定義事件 傳遞來的數據
　　const getData = (parmas) => {
　　console.log('getData', parmas)
　　}
　　</script>

上述內容就是vue3.0實踐之寫tsx語法的文章，后續更多相關內容，請大家繼續關注。