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