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

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

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

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

#### 額外挑戰
完成上述題目後，嘗試將 JS 區塊改為使用 Composition API 撰寫

## 回報流程

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


<!-- 解答：

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

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

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

https://codepen.io/jmimiding4104/pen/wvOKqBP

額外挑戰：
https://codepen.io/jmimiding4104/pen/dyrYzGM?editors=1111

因 Vue 文件(https://vuejs.org/api/options-composition.html#mixins)在 Composition API 不推薦使用 mixin 所以解答以 Composable functions 的方式撰寫。

模板與解答皆有使用 Bootstrap5(於 Setting 中引入)，
所以如果想要畫面呈現是相同的要記得載入 Bootstrap5 的 CDN。
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/zYXYJqa?editors=1010) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/VwNwGmJ) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/OJGJweP) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/wvZvEgz?editors=1010) |
| Ann Chou | [CodePen](https://codepen.io/annchou_illu/pen/NWmWLvp) |
|wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/GRLRXBq?editors=1011)|
| RayRay |[CodePen](https://codepen.io/CityRay/pen/LYvYJoY)|
| Py |[CodePen](https://codepen.io/Wpypy/pen/ExJxdaB?editors=1010)|
| Charlotte Lee |[CodePen](https://codepen.io/char849/pen/JjVjmJG)|
| Celine 510 |[CodePen](https://codepen.io/Celine-510/pen/bGJGOvq)|
| Winnie |[CodePen](https://codepen.io/codepen-io-winnie/pen/WNWNmje?editors=1010)|
| kawa |[CodePen](https://codepen.io/z83xji6/pen/LYvYvwY?editors=1010)|
| Chia Pin |[CodePen](https://codepen.io/joker-cat/pen/oNOgLzG)|
| Eden |[Codepen](https://codepen.io/iseden/pen/JjVobPg)|
| Uli | [CodePen](https://codepen.io/uli1313/pen/KKYwNLY?editors=1010) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/MWRYQLM?editors=1010) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/vYMEzWq?editors=1010) |
| chris | [CodePen](https://codepen.io/cjtseng07/pen/JjVdxej) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/BaEjVxz) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/ExJPJXN) |

<!--
| user | [CodePen]() |
-->