Differences

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

--- snippets:vue [2025/09/09 08:09] – lingao
+++ snippets:vue [2025/11/05 12:18] (current) – [tsx slots type] lingao
@@ Line 3: / Line 3: @@
 <code tsx>
-import { computed, defineComponent, type PropType } from 'vue'
+import { computed, defineComponent, defineProps, type PropType } from 'vue'
-const props = {
+type ModelType = __MODEL_TYPE__;
-  modelValue: {
-    type: Object as PropType<__MODEL_TYPE__>,
-    default: () => ({})
-  },
-  'onUpdate:modelValue': {
-    type: Function as PropType<(val: __MODEL_TYPE__) => void>
-  }
-}
 export default defineComponent({
-  props,
+  props: {
+    modelValue: {
+      type: Object as PropType<ModelType>,
+      default: () => ({} as ModelType),
+    },
+    'onUpdate:modelValue': {
+      type: Function as PropType<(val: ModelType) => void>,
+    },
+  },
   setup(props) {
-    const { 'onUpdate:modelValue': updateModelValue } = props
     const modelValue = computed({
       get() {
-        return props.modelValue
+        return props.modelValue;
       },
-      set(val) {
+      set(val: ModelType) {
-        updateModelValue?.(val)
+        props['onUpdate:modelValue']?.(val);
-      }
+      },
-    })
+    });
-    return () => <></>
-  }
+    return () => <></>;
-})
+  },
+});
 </code>
@@ Line 313: / 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>
 ++++