# Vue學習#25 mixins
###### tags: `Vue 直播班 - 2022 春季班`

## 什麼是 mixins
透過 `mixins` 可以直接將重複的功能混合到另一個元件中，這樣一來使用 mixins 的元件就可以使用被 mixin 的功能(甚至是元件方法)

<font color="blue">優點:</font> 可以減少元件重複撰寫的片段

## 使用方法

### 在元件中寫入語法 `mixins:[]` ， mixins 是一個陣列裡面直接存放要混合的元件名稱

下圖為根元件用 `mixins` 將兩個子元件進行混合

### 這樣就可以使用 card 、 card2的資料以及方法了


## 提醒

### 1. mixins 可以宣告多個
### 2. 當宣告的 mixins 中有多個相同的資料或是方法，則會判定使用最後宣告的元件來作為使用
### mixins 進去的元件生命週期會被重複觸發

## [完整範例](https://codepen.io/binlandz123/pen/jOYgvVY)