<div id="app">
  <alert-box>
    <p slot="header">預設 header </p>
    test
    <p slot="footer">預設 footer </p>
  </alert-box>
</div>
.alert-box{
  background: red;
  padding: 10px;
  color:#fff;
}

Vue.component('alert-box', {
    template: `
        <div class="alert-box">
        <slot name="header"></slot>
        <strong>Error!</strong>
        <main>
        <slot></slot>
        </main>
        <footer>
        <slot name="footer"></slot>
        </footer>
        </div>`
})

let app=new Vue({
  el: "#app",
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js