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

# 設計魔劍三組

## 7/15：Day 23

小明將自己的神作 BBCall 拿給小美看，小美覺得沒有什麼，這只不過是單純向內傳遞的技巧，因此要和小明介紹另一個技巧，由內向外傳遞。

小美：這段就是使用 $emit

小明：嗯嗯，這邊我準備好了，然後呢...

小美：...（糟糕，忘記了）

小美：那個...，晚餐快煮好了，我去收尾一下（迅速溜走）

小明：誒誒，今天晚餐不是已經在桌上了嗎？

任務：
- 請協助小明完成由元件內向外傳遞
- 本範例只需要調整 mobile-phone 的 HTML 屬性
- 需要正確將內部資訊向外傳遞（關鍵口訣：前內後外）

任務連結：[https://codepen.io/Wcc723/pen/rNxryYp?editors=1010](https://codepen.io/Wcc723/pen/rNxryYp?editors=1010)

---

### Ryan

<iframe height="265" style="width: 100%;" scrolling="no" title="Vue - emits" src="https://codepen.io/RyanYD/embed/wvMEpLM?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/wvMEpLM'>Vue - emits</a> by Ryan
(<a href='https://codepen.io/RyanYD'>@RyanYD</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

>助教回覆：作業做的很好哦，有正確使用 emit 將元件的 innerText 變數資料傳回 Vue 實體中囉 :+1:
>

---

### Vivian Chiang

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

>助教回覆：作業做的很好哦，有正確使用 emit 將元件的 innerText 變數資料傳回 Vue 實體中囉 :+1:
>

#### 7/14 補交

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

> 助教回覆：作業做的很好哦，寫的很正確 :+1:
>

---