看板 Web_Design 關於我們 聯絡資訊
如題,寫Vue時子元件要操作父元件的function會使用emit的方式 但由於過去都是在寫React,所以在練習Vue的時候自然而然的 就把父元件的function當作prop傳送到子元件中 子元件再直接拿prop的參數來當作function執行 一切也都沒什麼問題 於是心中就有疑問了,既然如此 我把父元件的function當作prop傳下去執行 跟使用emit的方式,有什麼差異嗎? Example: (父元件) <Child :handleClick="handleClick" /> (子元件) <button @click="handleClick()">click</button> -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 115.43.135.34 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1679750183.A.BC5.html
ck574b027: 維護上的差別。自己也會宣告函數,兩種都 @event="f()" 03/25 23:04
ck574b027: 這樣呼叫,你要怎麼一眼看出他的來源 03/25 23:05
ssccg: 差在跟Vue.js的convention不同,別人可能不習慣這種用法 03/25 23:11
ssccg: Vue.js的官方建議就是往下用props,往上用event 03/25 23:17
ssccg: 另外可能有比較方便的可能是event有內建一些modifier 03/25 23:21
ssccg: 至於一樓說的那都是命名問題吧,emit跟props一樣自訂命名, 03/25 23:27
shter: 傳進去跟不傳進去應用的場合不同 03/25 23:27
ssccg: 一樣設自訂命名的function,用typescript一樣能宣告type 03/25 23:30
ssccg: 反而是emit還能寫對handler function傳入值的validation 03/25 23:31
ssccg: (雖然emit不宣告也能直接$emit,props一定要宣告,讓有些人 03/25 23:32
ssccg: 誤會props比較嚴謹) 03/25 23:32
shter: 如果父子組件都是你自己寫的這樣搞當然沒關係 03/25 23:44
shter: 但很多時候會有共用組件、組件庫,跨專案在使用單獨打包的 03/25 23:44
shter: 這樣設計 :傳參數 @收事件 的作法比較單純,就是接口的型別 03/25 23:45
shter: 掌握好就可以了,因為對應用層來說都是收事件參數而已 03/25 23:46
shter: 如果要傳 Function 進去那使用方式說明上就會變得複雜 03/25 23:47
shter: Vue 把每一區都設計的很單純,但也沒阻止你複雜的使用它 03/25 23:49
ssccg: 還有一點是直接呼叫props傳進來的function跟用$emit不同, 03/26 00:41
ssccg: 不會經過Vue.js的一些檢查,例如子元件unmounted後$emit就 03/26 00:42
ssccg: 會被忽略,而function如果丟去非同步執行的callback那可能 03/26 00:44
ssccg: 連父元件都unmounted了照樣執行下去 03/26 00:44
ck574b027: 一樓的意思是 "$emit()" 跟 "f()" 可以幫助分辨handler 03/26 23:52
ck574b027: 來源,用props就跟local函數搞混了 03/26 23:53
ck574b027: 19F差別也太重要了吧,根本是會引起靈異事件的程度 03/27 00:09