<div id="app">
  <div class="p-5">
    <h3>具有多個同名插槽</h3>
    <card2>
      <template v-slot:header>我喜歡這張卡片</template>
      <template #default>這是卡片 2 號</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-header">
        <slot name="header">元件 Header</slot>
      </div>
      <div class="card-body">
        <slot>這段是預設的文字</slot>
      </div>
      <div class="card-body">
        <slot>這段是預設的文字</slot>
      </div>
      <div class="card-footer">
        <slot name="footer">元件 Footer 預設文字</slot>
      </div>
      <div class="card-footer">
        <slot name="footer">元件 Footer 預設文字</slot>
      </div>
    </div>`
});
app.mount('#app');
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js