feat: 更新 ReusableTemplate 组件,增加对默认插槽的支持和修复插槽属性传递
All checks were successful
/ playwright (push) Successful in 2m33s
/ depcheck (push) Successful in 1m11s
/ build-and-deploy-to-vercel (push) Successful in 1m8s

This commit is contained in:
严浩
2024-12-24 18:14:17 +08:00
parent b3e670ee50
commit e9f5aa56a6

View File

@ -1,16 +1,26 @@
<template> <template>
<h1>Use Reusable Template</h1> <h1>Use Reusable Template</h1>
<TemplateFoo.define v-slot="{ $slots, msg }"> <TemplateFoo.define v-slot="{ $slots, msg }">
<div>Hello {{ msg.toUpperCase() }}</div> <div>Hello {{ msg.toUpperCase() }}</div>
<component :is="$slots.slotNameee" slotPropName="valueee" /> <component :is="$slots.slotNameee" slotPropName="valueee" />
<component :is="$slots.default" />
</TemplateFoo.define> </TemplateFoo.define>
<h2>TemplateFoo.reuse</h2>
<TemplateFoo.reuse msg="World" /> <TemplateFoo.reuse msg="World" />
<h2>TemplateFoo.reuse with slotNameee(with props)</h2>
<TemplateFoo.reuse msg="Reusable"> <TemplateFoo.reuse msg="Reusable">
<template #slotNameee="{ slotPropName }"> <template #slotNameee="{ slotPropName }">
<div>Passing Slots,{{ slotPropName }}</div> <div>Passing Slots,{{ { slotPropName } }}</div>
</template> </template>
</TemplateFoo.reuse> </TemplateFoo.reuse>
<h2>TemplateFoo.reuse with slot.default</h2>
<TemplateFoo.reuse msg="Reusable">
<div>Passing Slots.Default</div>
</TemplateFoo.reuse>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -22,6 +32,7 @@ const TemplateFoo = createReusableTemplate<
slotNameee: { slotNameee: {
slotPropName: string; slotPropName: string;
}; };
default: object;
} }
>(); >();
</script> </script>