<div id="app">
  <div class="p-5">
    <h3>權重</h3>
    <card2></card2>
  </div>
</div>

const extendComponent1 = {
  data() {
    return {
      name: '擴展的元件'
    }
  },
  created() {
    console.log('擴展的元件生命週期');
  }
};
const mixinComponent = {
  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.component('card2', {
  template: `<div class="card">
      <div class="card-body">{{ name }}</div>
    </div>`,
  data() {
    return {
      name: '元件資料狀態',
    }
  },
  mixins: [mixinComponent],
  extends: extendComponent1,
  created() {
    console.log('card 的元件生命週期')
  }
});

app.mount('#app');