<div id="app">
  <div class="p-5">
    <h2>單一擴展</h2>
    <card></card>
  </div>
</div>

const extendComponent1 = {
  data() {
    return {
      name: '擴展的元件'
    }
  },
  created() {
    console.log('擴展的元件生命週期');
  }
};

const app = Vue.createApp({});

app.component('card', {
  template: `<div class="card">
    <div class="card-body">{{ name }}</div>
  </div>`,
  created() {
    console.log('card 的元件生命週期')
  },
  // 擴展直接帶入物件，故只能做到單一擴展，無法擴展多個
  extends:extendComponent1
});

app.mount('#app');