vue3（TSX）

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

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//引入tsx
import vueJSX from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),vueJSX()]//vueJSX()
})

src目录下定义App.tsx

import { ref } from 'vue';
let v = ref<string>('');
let flag = false;
let arr = [1, 2, 3]
type Props = {
    title: string
}
const renderDom = (props: Props,context:any) => {
    return (
        <div>
            <input type="text" v-model={v.value} />
            <div>{v.value}</div>
            <div>hello word</div>
            <div>v-show</div>
            {/* 隐藏 */}
            <div v-show={flag}>天天</div>
            {/*  显示*/}
            <div v-show={!flag}>开心</div>
            {/* 表达式书写 */}
            {flag ? <div>天天</div> : <div>开心</div>}
            {/* jsx不支持标签写v-for 可以使用map this指向的是iteM */}
            {/* {arr.map((item) => { return (<div onClick={clicktip.bind(this, item)}>￥{item}</div>) })} */}
            {/* jsx不支持标签写v-for 可以使用map  this指向的是ctx*/}

            {arr.map((item) => { return (<div onClick={clicktip.bind(this, context)}>￥{item}</div>) })}
            {/*获取父组件传输的值*/}
            <div>{props.title}</div>
        </div>
    )
}
//点击
const clicktip = (item: any) => {
 console.log(item)
}
//emit触发自定义方法提交父元素值
const clicktip = (context: any) => {
    context.emit('on-click','ctx')
}
export default renderDom;

App.vue文件引入使用

<template>
  <div>
          <renderDom title="我是标题" @on-click="adds"></renderDom>

  </div>
</template>

<script setup lang="ts">
import  renderDom from './App'
//自定义事件获取子组件传的值
const adds=(str:String)=>{
  console.log(str)
}
</script>

<style scoped>

</style>