Skip to content
On this page

Various form components

Vue components currently support three formats: sfc (single file component), jsx tsx, setup function


single file component Encapsulating html, js, and css codes in one file is the most commonly used and most convenient way of writing vue:

export default {
  data() {
    return {
      greeting: 'Hello World!'

  <p class="greeting">{{ greeting }}</p>

.greeting {
  color: red;
  font-weight: bold;


JSX/TSX It is an xml-like writing method that supports js code to directly operate components, such as:

  {{ id, text }) => {
    return <li key={id}>{text}</li>

he 3 supports jsx tsx, just like sfc, just write an index.tsx file and export the component in the entry file index.ts


import { defineComponent } from 'vue'

export default defineComponent({
  render() {
    return <div>Hello He3!</div>


import Index from './index.tsx'
export default Index

Setup Function

If your tool is very lightweight and only needs one or two dom elements or reuse the <h-transform> component provided by he 3, you can consider using the setup function method and export an object containing the setup function in the entry file index.ts:

import { Ref, h, resolveComponent } from 'vue'

export default {
  setup() {
    return () => h(resolveComponent('h-transform'), {
      onChange:  (inputValue: Ref<string>):string => {
        if(typeof inputValue.value === 'string') {
          return inputValue.value.toUpperCase()

        return inputValue.value
      onMounted:  (inputValue: Ref<string>) => {
        inputValue.value = 'Hello He3!'

Vue is actually used in the setup function to generate virtual domh Function, the above code will generate a conversion tool for converting lowercase characters to all uppercase for us: