# 混合元件方法 mixins

## ==單一混合、多個混合==

### mixuns的好處

* 可以重複混合
* 生命週期可以重複觸發
* 同名的變數、方法則會被後者覆蓋

以下的例子為兩個元件架構

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

當我們要一次加入這兩個元件使用時可以加入 mixins方式、mixins:[寫入加入的元件]

<div class="alert alert-danger text-center " >
當後者覆蓋前者時、只會顯示後者的資料與元件內容
</div>

const app = Vue.createApp({});

app.component('card', {
  template: `<div class="card">
    <div class="card-body">{{ name }}</div>
  </div>`,
  
  //mixins:[寫入加入的元件]
  mixins:[mixComponent1,mixComponent2],
  
  created() {
    console.log('card 的元件生命週期')
  }
})