---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 35 - refs 呼叫元件方法

觀看課程影音「操作 DOM 元素技巧 refs」後，練習下方題目。

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

> 練習 refs 呼叫元件方法
> - 請在 callComponent() 中，使用 $refs 的方法，指向 alert-com 元件，讓使用者點擊 button 會執行 callAlert() ，跳出 alert 警告。

## 回報流程

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


<!-- 解答：

methods: {
callComponent() {
this.$refs.alert.callAlert();
}
}
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| Wendy3#5615 | [Codepen](https://codepen.io/wendy03/pen/jOpjKqX) |
| LinaChen#1796 | [Codepen](https://codepen.io/LinaChen/pen/oNMryLB) |
|Hazel.#6020|[CodePen](https://codepen.io/Hazelhsieh/pen/VwBJdap?editors=1010)|
| yuyu#6310 |[CodePen](https://codepen.io/yuyu0905/pen/abjgKpN?editors=1010)|
|masterYan#2480|[CodePen](https://codepen.io/htzwgoqt-the-looper/pen/LYBKryx)|
|Chi#7605|[Codepen](https://codepen.io/YoChi84/pen/yLqdEpB)|
| albee#9121|[Codepen](https://codepen.io/albee-chang/pen/rNrEKJO?editors=1011)|
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/RwBzJBy?editors=1010)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/ExpBRGZ?editors=1011) |
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/yLqdErY?editors=1011)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/xxJozNr)|
|Hilda#7085|[CodePen](https://codepen.io/vwquikad-the-vuer/pen/LYBKByr)|
|mandylai#4055|[CodePen](https://codepen.io/mandy-lai-2/pen/xxJoJrW)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/oNMrMNq?editors=1010)|
|法希娜#3206|[Codepen](https://codepen.io/yiiserpf-the-encoder/pen/GRBbBxV)|
|泊岸#3466|[Codepen](https://codepen.io/qoq77416416/pen/MWBMBGo?editors=1010)|
|ㄚ翔#8126|[codepen](https://codepen.io/engineerjohnson/pen/RwBzBmb)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/RwBzYWN) |
| Potatolee#7749 | [CodePen](https://codepen.io/potatoleee/pen/wvxLEYP?editors=1011) |
|Wendy77#8049|[Codepen](https://codepen.io/Wendy__/pen/poZXKQo)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/jOpjeKj)|
|楊苡安#2752|[codepen](https://codepen.io/yi-an-yang/pen/rNrEQGz)|
|DIO大人#4776|[codepen](https://codepen.io/oscar-2283/pen/QWBXJrE)|
|Cheryl#4007|[Codepen](https://codepen.io/Cheryl-Hsu/pen/vYaqQjM?editors=1010)|
|出事了阿伯#9923|[Codepen](https://codepen.io/BradpittLai/pen/xxJoQaJ?editors=1010)|
|小木馬#8760|[Codepen](https://codepen.io/wmmtbcsd/pen/WNKqLdX)|
|冬天#5215|[Codepen](https://codepen.io/winter_/pen/JjBQwLg)|
|Alex#9978|[Codepen](https://codepen.io/datsxzqg-the-selector/pen/wvxLNvm)|
|無名#6427|[Codepen](https://codepen.io/Nomoney/pen/JjBzZjO)|
|Rainliao#2616|[Codepen](https://codepen.io/billpop741/pen/NWBZJaq)|
|Jill Lee#0809|[CodePen](https://codepen.io/chi-ling-lee/pen/WNKqmEQ?editors=1111)|
| azami#5986 |[CodePen](https://codepen.io/azami/pen/BaPgbvo)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/dyjBLZP)|
|圈圈#4060|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/oNMrRvx?editors=1010)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/ExpBBXb?editors=1010)|
|hannahTW#2224|[Codepen](https://codepen.io/hangineer/pen/dyjBxrG)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/QWBeWzK)|
Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/poZMjJJ)|
| 薯餅#3581 | [Codepen](https://codepen.io/ColdingPoTaTo/pen/BaPXprB) |
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/NWBQdLG) |
| MengLin#3001 | [Codepen](https://codepen.io/aacj2642/pen/qByejjx) |
| PayRoom#8328 | [CodePen](https://codepen.io/water38198/pen/BaOBaXy) |
| jacky010080#0880 | [CodePen](https://codepen.io/Yen-Jung-Chen/pen/xxaKGMO?editors=1010) |
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/bGxbBzx) |
| Rena#6249 | [Codepen](https://codepen.io/aureate0116/pen/LYJYEPm) |
| helena#8461 | [CodePen](https://codepen.io/helena27/pen/NWLWPxq) |
| Bassjim#0118 | [CodePen](https://codepen.io/unrtxbaq/pen/MWqWPBz?editors=1111) |
| Kimi#9564 | [Codepen](https://codepen.io/kimihu91/pen/OJwqBqy) |
| Yiru#0236 | [Codepen](https://codepen.io/yiru94/pen/poOvbLX?editors=1010) |
| GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922 | [Codepen](https://codepen.io/sho666/pen/QWVbOEm?editors=1010) |
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/yLxYLJE?editors=1011)|
|suihsilan#9485|[CodePen](https://codepen.io/suihsilan/pen/YzOyeMm)|
|YI#0863|[CodePen](https://codepen.io/YI0305/pen/MWqyJRX?editors=1010)|
| ABOOS#6276 | [CodePen](https://codepen.io/guhungyin/pen/zYJKdva) |
|阿鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/eYLROaK?editors=1011)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/PodxOKY) |
| Eason#7884 | [CodePen](https://codepen.io/ASLEO/pen/jOeByMb) |