Differences

This shows you the differences between two versions of the page.

--- snippets:vue [2025/08/08 07:56] – [tsx _form] lingao
+++ snippets:vue [2025/11/05 12:18] (current) – [tsx slots type] lingao
@@ Line 1: / Line 1: @@
 ==== tsx component best practice ====
 bare bone
+<code tsx>
+import { computed, defineComponent, defineProps, type PropType } from 'vue'
+type ModelType = __MODEL_TYPE__;
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Object as PropType<ModelType>,
+      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 () => <></>;
+  },
+});
+</code>
 <code tsx>
 import { defineComponent } from 'vue'
@@ Line 17: / Line 49: @@
 <code tsx>
 import { defineComponent } from 'vue'
-export interface Expose {}
 export default defineComponent({
@@ Line 150: / Line 181: @@
               </div>
             </div>
-            <ElTable class="flex-1" v-loading={loading.value} data={tableData.value}>
+            <ElTable class="flex-[1-1-0]" v-loading={loading.value} data={tableData.value}>
               <ElTableColumn width="60" type="selection" align="center" />
               <ElTableColumn label="序号" width="60" type="index" align="center">
@@ Line 283: / Line 314: @@
 </code>
+++++
+==== tsx slots type ====
+++++ tsx slots type |
+<codeprism tsx>
+const Component = defineComponent({
+  props: {
+    config: {
+      type: Array as PropType<EntityInfo[]>
+    }
+  },
+  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 = (
+  <Component>
+    {
+      {
+        default: (scope) => {
+          scope
+        }
+      } as typeof s
+    }
+  </Component>
+)
+</codeprism>
 ++++