[JavaScript知识库]vue3 + vite + ts + setup 第七练 TSX的使用

在Vue2 中我们可以使用jsx 但是好像不是很友好，也很少用，vue3对typescript的支持度，tsx写法越来越被接受，那么我们也了解一下TSX如何使用，学习学习

一、安装配置

1、安装插件plugin-vue-jsx

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

?2、在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()],//配置jsx
  server: {
    host: "0.0.0.0",
    port: 8088,
  },
});

3、修改tsconfig.json 配置文件

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

?完整配置：

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": false,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

二、使用TSX(JSX)

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

1、创建tsx文件，src/TSX/App.tsx (可以把tsx当成一个组件使用)

<template>
  <div class="layout">

      <!-- tsx的使用 -->
      <renderDom></renderDom>

  </div>
</template>

<script setup lang="ts">
import renderDom from "../TSX/App"

</script>

<style lang="less" scoped>

::v-deep(.red) {
  color: red;
}
</style>

2、一些指令和方法的使用? 在jsx/tsx中绑定使用 {}

tsx支持 v-model?的使用

import { ref } from "vue";


let vModel = ref<string>("我是tsxv-model")

const renderDom = () => {
  return (
    <div>
      <div>hellow tsx</div>
      <input type="text" v-model={vModel.value} />
      <div class='red'>{vModel.value}</div>
    </div >
  )
}

export default renderDom;

v-show的使用

import { ref } from "vue";


let vModel = ref<string>("我是tsxv-model")
let flag = true

const renderDom = () => {
  return (
    <div>
      <div>hellow tsx</div>
      <br />
      <div v-show={flag}>我是v-show=true</div>
      <div v-show={!flag}>我是v-show=false</div>
    </div >
  )
}

export default renderDom;

v-if是不支持的 所以需要改变一下编程思想? 用三元运算

import { ref } from "vue";

let vModel = ref<string>("我是tsxv-model")
let flag = true

const renderDom = () => {
  return (
    <div>
      <div>hellow tsx</div>
    
      <br />
      {flag ? <div>我是v-if=true</div> : <div>我是v-if=false</div>}
    </div >
  )
}

export default renderDom;

v-for也是不支持的,需要使用map()

v-bind 直接赋值就可以了

import { ref } from "vue";


let vModel = ref<string>("我是tsxv-model")
let flag = true
let arr = [1, 2, 3, 4, 5]
const renderDom = () => {
  return (
    <div>
      <div>hellow tsx</div>
      <input type="text" v-model={vModel.value} />
      <div class='red'>{vModel.value}</div>
      <br />
      <div v-show={flag}>我是v-show=true</div>
      <div v-show={!flag}>我是v-show=false</div>
      <br />
      {flag ? <div>我是v-if=true</div> : <div>我是v-if=false</div>}

      <br />
      {
        arr.map(v => {
          return (<div data-index={v}>{v}</div>)
        })
      }
    </div >
  )
}

export default renderDom;

v-on绑定事件

• 所有事件有on开头
• 所有事件名称首字母大写
• 绑定onClick={ontapClick}
• 传参使用bind()或箭头函数

let arr = [11, 22, 33, 44, 54]
const renderDom = () => {
  return (
    <div>
      {
        arr.map(v => {
          return (<div onClick={ontapClick.bind(this, v)} data-index={v}>{v}</div>)
        })
      }
      <div>
        <div onClick={() => onCcc('我是箭头')}>我是箭头函数传参</div>
      </div>
    </div >
  )
}

let ontapClick = (index: any) => {
  console.log("点击了", index)
}
let onCcc = (msg: string) => {
  console.log("点击了", msg)

}

export default renderDom;

Props 接受值

import { ref } from "vue";

type Props = {
  title: string
}

const renderDom = (props: Props) => {
  return (
    <div>
      <div>{props.title}</div>
    </div >
  )
}


export default renderDom;


//父组件
 <renderDom title="我是tsx"></renderDom>

Emit派发

函数中出入ctx ，通过ctx派发事件传参

import { ref } from "vue";
let arr = [11, 22, 33, 44, 54]
type Props = {
  title: string
}
const renderDom = (props: Props, ctx: any) => {
  return (
    <div>
      <div>{props.title}</div>
     
      {
        arr.map(v => {
          return (<div style="width:200px;height:30px;background:red;margin-bottom:10px" onClick={ontapClick.bind(this, v, ctx)} data-index={v}>{v}</div>)
        })
      }
    
    </div >
  )
}

let ontapClick = (index: any, ctx: any) => {
  console.log("点击了", index)
  ctx.emit("on-click", index)
}

export default renderDom;

父组件接收：

<template>
      <!-- tsx的使用 -->
      <renderDom title="我是tsx" @on-click="getNum"></renderDom>
</template>
<script setup lang="ts">
import renderDom from "../TSX/App"

let getNum = (e: any) => {
  console.log("我接受了", e)
}
</script>