--- 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 > - 實際狀況如圖: > ![](https://i.imgur.com/8WkXvyc.png) #### 額外挑戰 完成上述題目後,嘗試將 JS 區塊改為使用 Composition API 撰寫 ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖(需打開程式碼的部分觀看) ![](https://i.imgur.com/vftL5i0.png) <!-- 解答: 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]() | -->
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up