關於vue的props和emit的問題

vue.js $emit vue props

ji3g48xj6 2021-03-12 12:53:45 ‧ 947 瀏覽

分享至

我是學前端幾個月的前渣，可能問的問題很基本

請先看看此網站的範例: https://reurl.cc/Q7YGgo

點擊按鈕，下方的資料會根據id來決定渲染的資料

但有幾個地方我一直看不懂，網路上也有找到幾個類似的問題但都不太一樣的感覺

1.他的父層資料裡的物件沒有value屬性，他是怎麼生出來給子層做使用的?

2.他的emit寫input事件傳遞id參數，但input事件我看子、父層也沒有，我有查到model是語法糖，我猜他可能是寫成v-model="currentId" ，但跟網路上其他的範例也差很多，他寫的也太省略了，我想問到底怎麼傳的?

以上! 請大大耐心跟我說明，謝謝!

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

Ares

iT邦研究生 2 級 ‧ 2021-03-12 14:29:08

最佳解答

其實你的問題都跟 v-model 有關，官網都有寫到這些用法，v-model 綁定在組件上預設會以 value 傳入子組件的 props，並使用 input 打出事件達到雙向綁定

回應 3
分享
檢舉

Homura iT邦高手 1 級 ‧ 2021-03-12 14:44:43 檢舉

發現有了自刪XD

EN iT邦好手 1 級 ‧ 2021-03-12 15:29:27 檢舉

喔喔喔，學習了!

ji3g48xj6 iT邦新手 5 級 ‧ 2021-03-12 18:32:30 檢舉

感謝回答

登入發表回應

iT邦好手 1 級 ‧ 2021-03-12 14:18:43

我看完了範例程式碼，我想:

value 應該是從 currentId 傳入的。
如果 value 等於 id ，他會利用動態綁定 class 改變按鈕樣式。
至於 emit ，我也沒有在父組件上看到 Handler (可能是我眼殘)。
你可以考慮把程式碼載下來然後在本地端 Run 看看到底有什麼功能。

除了回答外，我有一些問題跟建議給你參考:

他提供的程式範例是 3 年前撰寫的，這期間 Vue 也 release 了很多個版本，比起閱讀這本書的範例不如參考官方文件。
其實有很多繁中或是簡中的 Vue.js 教材，為什麼要挑日文教材 OAO

回應 2
分享
檢舉

EN iT邦好手 1 級 ‧ 2021-03-12 14:20:07 檢舉

以上答案供原 PO 參考，我覺得這個範例的可讀性很差(當然可能是我太廢)，但這是我第一次看到這麼難懂的 Vue.js 範例...

ji3g48xj6 iT邦新手 5 級 ‧ 2021-03-12 19:02:36 檢舉

感謝參考! 因為想去日本發展所以用日文找範例來研究，但還是太菜了，還是先打好基礎再說

登入發表回應

我要發表回答

立即登入回答

參賽組數

1047 組

團體組數

40 組

累計文章數

13196 篇

最後報名日

9/15

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 16th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react 資訊安全

IT邦幫忙