==== tsx component best practice ==== bare bone


import { computed, defineComponent, defineProps, type PropType } from 'vue'

type ModelType = __MODEL_TYPE__;

export default defineComponent({
  props: {
    modelValue: {
      type: Object as PropType,
      default: () => ({} as ModelType),
    },
    'onUpdate:modelValue': {
      type: Function as PropType<(val: ModelType) => void>,
    },
  },
  setup(props) {
    const modelValue = computed({
      get() {
        return props.modelValue;
      },
      set(val: ModelType) {
        props['onUpdate:modelValue']?.(val);
      },
    });

    return () => <>;
  },
});


import { defineComponent } from 'vue'

export default defineComponent(
  (props: { message: T }) => {
    return () => <>
  },
  {
    props: []
  }
)


import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return () => <>
  }
})

++++ tsx component |


import { defineComponent } from 'vue';
export interface Expose {
}

export default defineComponent({
  name: 'App',
  props: { modelValue: { type: Object as PropType, required: true } },
  emits: ['update:modelValue'],
  setup(props: { a: 1 }, { emit, slots, expose }) {
    const count = ref(0);
    const inc = () => {
      count.value++;
    };
    
    expose({ ... } satisfies Expose) // https://github.com/vuejs/core/issues/6643#issuecomment-2232546917
    return () => (
      {count.value}
      {slots.default ? slots.default() : 'foo'}
      
    );
  },
});

// In other components
import CompA, {Exposed} from "./CompA"
const componentRef = ref & Exposed>()

 componentRef.value = el}>
      {{
        default: () => 'default',
        slotA: () => 'slotA'
      }}

++++ ==== tsx table ==== ++++ tsx table |


import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
import { ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElButton } from 'element-plus'
import { defineComponent, onMounted, ref } from 'vue'
import {ItemType} from './types'

type PaginationConfiguration = Pick
type QueryParams = Partial>
type Item = ItemType

export default defineComponent({
  setup() {
    const loading = ref(false)
    const tableData = ref([])
    const queryParams = ref({})
    const paginationConfig = ref({
      total: 0,
      pageNum: 1,
      pageSize: 10
    })

    function handleQuerySearch() {
      getTableData()
    }
    function handleQueryReset() {
      queryParams.value = {}
      getTableData()
    }
    function handleAdd() {}
    // @ts-expect-error
    function handleEdit(row: Item) {}
    // @ts-expect-error
    function handleDelete(row: Item) {}

    async function getTableData() {
      // @ts-expect-error
      const res = { data: [{}] }
      loading.value = true
      // paginationConfig.value.total =
      loading.value = false
    }

    function handleKeydown(e: KeyboardEvent) {
      if (e.key === 'Enter') handleQuerySearch()
    }

    onMounted(() => {
      getTableData()
    })

    return () => {
      return (
        
          
            
              
                
              
              
                
                  搜索
                
                
                  重置
                
              
            
            
              
                
                  新增
                
              
            
            
              
              
                {(scope) => (
                  
                    {(paginationConfig.value.pageNum - 1) * paginationConfig.value.pageSize +
                      scope.$index +
                      1}
                  
                )}
              
              
                
              
              
              
                {(scope) => (
                  
                     handleEdit(scope.row)}
                    >
                      编辑
                    
                     handleDelete(scope.row)}
                    >
                      删除
                    
                  
                )}
              
            
            
               getTableData()}
              />
            
          
        
      )
    }
  }
})

++++ ==== tsx _form ==== ++++ tsx _form |


import { computed, defineComponent, PropType } from 'vue'
import BaseCard from '@/components/BaseCard/Index'
import type { AssessmentObjective } from './types'
import { ElForm, ElFormItem } from 'element-plus'

const rules = {}

export default defineComponent({
  props: {
    modelValue: {
      type: Object as PropType,
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const modelValue = computed({
      get() {
        return props.modelValue
      },
      set(val) {
        emit('update:modelValue', val)
      }
    })

    return () => (
      
        
          
            
              name
            
          
        
      
    )
  }
})

++++ ==== tsx add ==== ++++ tsx add |


import { defineComponent, ref } from 'vue'
import BaseContainer from '@/components/BaseContainer/BaseContainer.vue'
import Form from './_Form'
import { AssessmentObjective } from './types'
import { ElButton } from 'element-plus'

export default defineComponent({
  setup() {
    const form = ref({})

    function handleSubmit() {}

    return () => (
      
        {{
          default: () =>

,
          'header-options': () => (
            
              提交
            
          )
        }}
      
    )
  }
})

++++ ==== tsx slots type ==== ++++ tsx slots type | const Component = defineComponent({ props: { config: { type: Array as PropType } }, slots: Object as SlotsType<{ default: ({ foo: string; bar: number }) => JSX.Element }>, setup: (props, { slots }) => { if (props.config == null) throw Error('Config can not be null') const context = createReferenceInstance(props.config) provide(refInjectionKey, context) return () => <>{slots.default && slots.default()} } }) const s = new Component().$slots const a = ( { { default: (scope) => { scope } } as typeof s } ) ++++