<div id="app">
  <div class="p-5">
    <h2>單一混合、多個混合</h2>
    <card class="my-2"></card>
    <card2 class="my-2"></card2>
    <card3 class="my-2"></card3>
  </div>
</div>

const mixComponent1 = {
  data() {
    return {
      name: '混合的元件'
    }
  },
  created() {
    console.log('混合的元件1的created生命週期');
  },
  mounted(){
    console.log('混合的元件1的mounted生命週期')
  }
};
const mixComponent2 = {
  data() {
    return {
      name: '混合的元件 2'
    }
  },
  created() {
    console.log('混合的元件2的created生命週期');
  },
  mounted(){
    console.log('混合的元件2的mounted生命週期')
  }
};


const app = Vue.createApp({});

app.component('card', {
  template: `<div class="card">
    <div class="card-body">{{ name }}</div>
  </div>`,
  created() {
    console.log('card 1 的元件created生命週期')
  },
  // 依照混入(mixins)陣列內的元件順序來決定優先權
  // 後面混入的會覆蓋前面混入的資料，生命週期也會依序觸發
  mixins:[mixComponent1,mixComponent2]
})

app.component('card2', {
  template: `<div class="card">
    <div class="card-body">{{ name }}</div>
  </div>`,
  created() {
    console.log('card 2 的元件created生命週期')
  },
  // 依照混入(mixins)陣列內的元件順序來決定優先權
  // 後面混入的會覆蓋前面混入的資料，生命週期也會依序觸發
  mixins:[mixComponent2,mixComponent1]
})

app.component('card3', {
  data(){
    return{
      name:'card3的name'
    }
  },
  template: `<div class="card">
    <div class="card-body">{{ name }}</div>
  </div>`,
  created() {
    console.log('card 3 的元件created生命週期')
  },
  // 依照混入(mixins)陣列內的元件順序來決定優先權
  // 後面混入的會覆蓋前面混入的資料，生命週期也會依序觸發
  mixins:[mixComponent2,mixComponent1]
})

app.mount('#app');