<div id="app">
<div class="p-5">
<h3>多元件指定相同插槽</h3>
<card2>
<template v-slot:header>我喜歡這張卡片</template>
<template #default>這是卡片 2 號</template>
<template #default>這是卡片 二 號</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');