vue3笔记十(vue3 tsx使用)

1、配置

// 1、插件安装
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()]
})

// 3、tsconfig.json配置
compilerOptions中添加如下：
 "jsx": "preserve",
 "jsxFactory": "h",
 "jsxFragmentFactory": "Fragment",

配置完成后，随便创建一个xxx.tsx文件，在别的界面引入即可使用

2、tsx基本使用

1、使用ref需加.value
2、支持 v-model、v-show
3、不支持v-if、v-for

// test.tsx
import {ref} from 'vue'

let v = ref<string>('')
let flag = ref<boolean>(false)
let list:Array<number> = [1, 3, 4, 5, 6]

type Props = {
  title: string
}

const renderDom = (props: Props, content: any) => {
  return (
      <>
        {/* 1、支持v-show */}
        <div v-show={flag.value}>真的</div>
        <div v-show={!flag.value}>假的</div>

        {/* 2、不支持v-if */}
        {
          flag.value ? <div>if真滴啊</div> : <div>if假嘚啊</div>
        }

        {/* 3、不支持v-for */}
        {
          list.map((item, index) => {
            return <div>item值----{item}, index值-------{index}</div>
          })
        }

        {/* 4、v-bind直接赋值 + v-on绑定事件 */}
        <input v-model={v.value} type="text" onChange={inputChange.bind(this, v.value)}></input>
        <div id='test' data-list={list} data-v={v.value} style="background: red">
          {v.value}
        </div>

        {/* 5、获取props值 */}
        <div>{props.title}</div>

        {/* 6、emit派发 */}
        <button onClick={clickHandle.bind(this, content)}>派发事件</button>
      </>
  )
}

const inputChange = (v:string) => {
  let test = document.querySelector<HTMLElement>('#test')
  test!.style.backgroundColor = v
}

const clickHandle = (ctx:any) => {
  ctx.emit('on-click', 111)
}

export default renderDom

// 父组件--------------------------------------------------------------------------
<template>
  <test @on-click="getClick" title="我是标题啊"></test>
</template>

<script setup lang="ts">
import test from './components/test.tsx'

const getClick = (val:any) => {
  console.log('接收tsx事件', val)
}
</script>

原文链接：
https://xiaoman.blog.csdn.net/article/details/123172735