defineProps doesn't work in h function?
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>
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>
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.