---
tags: JavaScript 實戰班, Day24, Vue
---

# 設計魔劍三組

7/16：Day 24
完成由內向外推送資訊的小明，覺得可以更進一步的將先前的 props 整合進來，將整個 mobile-phone 的元件功能更加完善。

小明：好餓喔…，看我五分鐘內完成這個功能！

任務：

請維持單向數據流，避免直接修改外部的資料
本範例需要調整 mobile-phone 的 JS 原始碼，其中包含：
data 的運行
如何避免直接調整到外部資料的原始碼（v-model, data）
完成 pushData 的函式，並與元件中的 @push=“getMessage” 進行對應
需要正確將內部資訊向外傳遞（關鍵口訣：前內後外）
任務連結：https://codepen.io/Wcc723/pen/RwrBpQX?editors=1010

---

### Ryan

<iframe height="265" style="width: 100%;" scrolling="no" title="Vue - emits2" src="https://codepen.io/RyanYD/embed/gOPBwpd?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/RyanYD/pen/gOPBwpd'>Vue - emits2</a> by Ryan
(<a href='https://codepen.io/RyanYD'>@RyanYD</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

>助教回覆：作業做的很好哦，props 、 emit 使用都正確，相信同學經過本次練習，對這兩個方法有更深入的理解了 :+1:

---