Various form components ​

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

SFC ​

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

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

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

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

JSX/TSX ​

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

<ul>
  {this.items.map(({ id, text }) => {
    return <li key={id}>{text}</li>
  })}
</ul>

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

src/index.tsx

import { defineComponent } from 'vue'

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

src/index.ts

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: