Subscribe on changes!

defineProps doesn't work in h function?

avatar
Jun 27th 2023

What problem does this feature solve?

defineProps doesn't work in h function? Did I miss something

<script setup lang="ts">
import { h } from "vue"


const slots = defineSlots<{ 
  default: (props: { msg: string }) => string
  footer: (props: { title: string }) => string
}>()

const MySlots = () => {
  return h("div", null, [slots.default?.({ msg: "the default props" }), slots.footer?.({ title: "is a footer props" })])
}
</script>
<template> 

  <MySlots>
    <template #default="{ msg }">   MySlots--- {{ msg }} </template>
    <template #footer="{ title }">   footer  ---{{ title }} </template>
  </MySlots>
</template>

What does the proposed API look like?

I suppose it would like

<script setup lang="ts"> 
defineSlots<{ 
  default?: (props: { msg: string }) => string
  footer?: (props: { title: string }) => string
}>()
</script>
<template>
  <div class="h-slots">
    <slot msg="Hi there"></slot>
    <slot name="footer" title="footer"></slot>
  </div>
</template>
avatar
Jun 27th 2023

I modified this, it woks

<script setup lang="ts">
import { h, useSlots } from "vue"

 defineSlots<{ 
  default: (props: { msg: string }) => string
  footer: (props: { title: string }) => string
}>()

const MySlots = () => {
const slots = useSlots()
  return h("div", null, [slots.default?.({ msg: "the default props" }), slots.footer?.({ title: "is a footer props" })])
}
</script>
<template> 

  <MySlots>
    <template #default="{ msg }">   MySlots--- {{ msg }} </template>
    <template #footer="{ title }">   footer  ---{{ title }} </template>
  </MySlots>
</template>
avatar
Jun 30th 2023

I feel this is a bug. without template it works see Maybe we should not hoisted template tag

const _hoisted_2 = /*#__PURE__*/_createElementVNode("template", null, [
  /*#__PURE__*/_createElementVNode("p", null, "Not show")
], -1 /* HOISTED */)

see https://vuejs.org/guide/components/slots.html#named-slots

When a component accepts both a default slot and named slots, all top-level non-<template> nodes are implicitly treated as content for the default slot.