<div id="app">
<div class="p-5">
<h3>具名插巢</h3>
<card2>
<template v-slot:header>我喜歡這張卡片</template>
<!-- 預設請加入 default -->
<template #default>這是卡片 2 號</template>
<template v-slot:footer>這是卡片腳</template>
</card2>
<h3 class="mt-3">具名插巢縮寫</h3>
<card2>
<template #header>我喜歡這張卡片</template>
<template #default>這是卡片 2 號</template>
<template #footer>這是卡片腳</template>
</card2>
</div>
</div>
const app = Vue.createApp({
});
app.component('card2', {
template: `<div class="card" style="width: 18rem;">
<div class="card-header">
<slot name="header">元件 Header</slot>
</div>
<div class="card-body">
<slot>這段是預設的文字</slot>
</div>
<div class="card-footer">
<slot name="footer">元件 Footer</slot>
</div>
</div>`
});
app.mount('#app');
