---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 Day 44 - provider 跨層級通訊

觀看完課程影音「跨層級資料傳遞 provide」後，練習下方題目。

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

> provide 跨層級通訊
> - 使用 provide 方法，將 cash（1000）傳送給 ming 元件，但不要讓 ming-mom 元件收到 cash 的值。
> - 提示一：app 為第一層、ming-mom 為第二層、ming 為第三層。
> - 提示二：請勿使用 props 、 mitt 方法
>
> - 實際狀況如圖：
> 

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

## 回報流程

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


<!-- 解答：

const ming = {
template: `<div>
小明拿到了 {{ this.cash }} 元零用錢
</div>`,
inject: ['cash'],
}

const app = Vue.createApp({
data() {
return {
cash: 1000,
}
},
provide() {
return {
cash: this.cash,
}
},
})

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

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

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

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/RwOwPjj?editors=1010) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/eYoYNyY) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/oNONXqW) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/yLrLNGL)|
| py | [CodePen](https://codepen.io/Wpypy/pen/gOyOamE?editors=1010) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/eYoYpRv?editors=1011) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/dyLyGKP) |
|Wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/NWmWbGM?editors=1010)|
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/KKYKawK?editors=1010) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/WNWNpNo) |
| Ann Chou | [CodePen](https://codepen.io/annchou_illu/pen/JjVjavV) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/poBoQNJ?editors=1010) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/bGJGOog) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/jOROdBe) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/eYomzZJ) |
|Eden|[Codepen](https://codepen.io/iseden/pen/xxebEyB)|
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/GRLgrmX?editors=1010) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/dyLPdaN) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/eYomrdG)
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/JjVoaym) |
| chris | [CodePen](https://codepen.io/cjtseng07/pen/oNOXmPX) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/BaEjbOY) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/XWQKmWq) |

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