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

//函数式组件
export default ()=> <div>TestTSX</div>

// defineComponent() render Options api 
import { defineComponent } from "vue";
import default defineComponent({
    render(){
        return <div>TestTSX</div>
    }
})

// defineComponent() setup Composition api
import { defineComponent } from "vue";
export default defineComponent({
    setup(){
        return ()=> <div>TestTsx</div>
    }
})


import { defineComponent } from "vue";
export default defineComponent({
    setup(){
        const counter = ref(0)
        return ()=> (
            <>
                <div>TestTsx</div>
                <input type="text" v-model={counter.value}/>
            </>
        )
    }
})


import { defineComponent } from "vue";

export default defineComponent({
  emits: ["click"],
  setup(props, { emit }){
    return ()=> (
      <>
        {/* <Child v-slots={{
            default: ()=> "xxxxx",
            prefex: ()=> <i>prefix</i>,
            suffix: ()=> (props: Record<"name", string>) => <span>{props.name}</span>
          }}>
        </Child> */}
        <Child>
          {{
            default: ()=> "xxxxx",
            prefex: ()=> <i>prefix</i>,
            suffix: ()=> (props: Record<"name", string>) => <span>{props.name}</span>
          }}
        </Child>
        <button onClick={()=> {{ emit("click") }}}>点击触发emit</button>
      </>
    )
  }
})

类组件写法

import { Options, Vue } from 'vue-class-component'

@Options({
  components: {
  }
})
export default class FormRender extends Vue {
    name = 'form-component'
    render():JSX.Element {
        return (
            <div>
                表单组件
            </div>
        )
    }
}
复制代码

vue-class-component也是vue3提供的一个编译库。

个人更喜欢类组件写法，你喜欢什么就怎样写。

我们需要知道的几个知识点。

JSX.Element

typescript中, jsx的类型就是JSX.Element。

@Options

就是vue组件的配置，比如prop,data等。

 @Options({
 props: {
  msg: String
 },
 data(){
  return{
    count: 1
   }
 }
 })

参考资料