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