---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 45 - mixins 讓元件程式碼可重複利用

觀看完課程影音「混合元件方法 mixins」後，練習下方題目。

題目
---
操作 [這個模板](https://codepen.io/hexschool/pen/QWVWNbq?editors=1010)，執行以下要求（只能操作 JS 的部分）：

> mixins 讓元件程式碼可重複利用
> - 在 nike 、 adidas 、 reebok 元件中分別以 mixin 方式引入 filterMix，讓商品價格左側多顯示 $ 字號
> - 提示一：請勿直接調整 template
> - 提示二：添加 $ 字號方法已經在 filterMix 設定好，同學只需在個別元件中以 mixin 方式引入 filterMix
> - 實際狀況如圖：
> 

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

app.component('nike', {
mixins: [filterMix],
data() {
...
}
});

app.component('adidas', {
mixins: [filterMix],
data() {
...
}
});

app.component('reebok', {
mixins: [filterMix],
data() {
...
}
});

-->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| 冬天#5215 | [CodePen](https://codepen.io/winter_/pen/NWLrEbP)|
| Wendy3#5615 | [CodePen](https://codepen.io/wendy03/pen/WNgxYGv)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/OJoXaWK)|
| yuyu#6310 |[codepen](https://codepen.io/yuyu0905/pen/gOdMQgJ?editors=1010)|
| hannahTW#2224 |[codepen](https://codepen.io/hangineer/pen/eYLzQWW?editors=1010)|
| albee#9121|[Codepen](https://codepen.io/albee-chang/pen/qBMNQXK?editors=1010)|
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/oNPLQoa?editors=1010)|
| YC#2522 | [Codepen](https://codepen.io/YCLu/pen/eYLzQMG) |
| 無名#6427 | [Codepen](https://codepen.io/Nomoney/pen/YzOybNJ) |
| Potatolee#7749 | [Codepen](https://codepen.io/potatoleee/pen/dyqXQKw?editors=1010) |
| LinaChen#1796 | [Codepen](https://codepen.io/LinaChen/pen/gOdMQXV) |
| mandylai#4055 | [Codepen](https://codepen.io/mandy-lai-2/pen/MWqeZwQ?editors=0011) |
|int#7518|[Codepen](https://codepen.io/intHuang/pen/ExeyGwM?editors=1010)|
|Hilda#7085|[Codepen](https://codepen.io/vwquikad-the-vuer/pen/LYJZMOP)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/LYJZMRK)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/KKxMJQj)|
|小木馬#8760|[Codepen](https://codepen.io/wmmtbcsd/pen/oNPLmVo?editors=1010)|
|出事了阿伯#9923|[Codepen](https://codepen.io/BradpittLai/pen/MWqexrm?editors=1010)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/OJoXqGy?editors=1010)|
|楊苡安#2752|[CodePen](https://codepen.io/yi-an-yang/pen/JjaKzQe)|
|YI#0863|[CodePen](https://codepen.io/YI0305/pen/KKxMEbW?editors=1011)|
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/jOvrozo?editors=1010)|
|Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/KKxMjLm?editors=1010)|
| azami#5986 |[CodePen](https://codepen.io/azami/pen/bGxeXKo)|
|圈圈#4060|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/rNZMBmN?editors=0010)|
|masterYan#2480|[Codepen](https://codepen.io/htzwgoqt-the-looper/pen/ExegYXP?editors=1011)|
|MengLin#3001|[Codepen](https://codepen.io/aacj2642/pen/QWVKWwW?editors=1010)|
Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/QWVKyEg?editors=1010)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/JjaRjzm)|
|泊岸#3466|[Codepen](https://codepen.io/qoq77416416/pen/BaOLVjJ?editors=1010)|
|柚子 #3958|[Codepen](https://codepen.io/as6625998/pen/rNZMXVp?editors=0111)|
|Alex#9978|[Codepen](https://codepen.io/datsxzqg-the-selector/pen/zYJozNo?editors=1010)|
|薯餅#3581|[Codepen](https://codepen.io/ColdingPoTaTo/pen/BaOpWYo)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/zYJNeXg)|
|小白#2406|[CodePen](https://codepen.io/gracewhite/pen/bGxWJdQ?editors=1010)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/ExeXwGp)|
|Tami#6742|[CodePen](https://codepen.io/wqsdqbjn-the-vuer/pen/jOvdJBg)|
|Eason#7884|[CodePen](https://codepen.io/ASLEO/pen/abRwpdZ)|