feat: 更新 ReusableTemplate 组件,增加对默认插槽的支持和修复插槽属性传递
This commit is contained in:
@ -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>
|
||||
|
Reference in New Issue
Block a user