39 lines
965 B
Vue
39 lines
965 B
Vue
<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>
|
|
</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">
|
|
import { createReusableTemplate } from '@vueuse/core';
|
|
|
|
const TemplateFoo = createReusableTemplate<
|
|
{ msg: string },
|
|
{
|
|
slotNameee: {
|
|
slotPropName: string;
|
|
};
|
|
default: object;
|
|
}
|
|
>();
|
|
</script>
|