作者ctah (藍寶)
看板Web_Design
標題[問題] Vue的子元件操作父元件的function
時間Sat Mar 25 21:16:21 2023
如題，寫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://webptt.com/m.aspx?n=bbs/Web_Design/M.1679750183.A.BC5.html
1F：→ ck574b027: 維護上的差別。自己也會宣告函數，兩種都 @event="f()" 03/25 23:04
2F：→ ck574b027: 這樣呼叫，你要怎麼一眼看出他的來源 03/25 23:05
3F：→ ssccg: 差在跟Vue.js的convention不同，別人可能不習慣這種用法 03/25 23:11
4F：→ ssccg: Vue.js的官方建議就是往下用props，往上用event 03/25 23:17
5F：→ ssccg: 另外可能有比較方便的可能是event有內建一些modifier 03/25 23:21
6F：→ ssccg: 至於一樓說的那都是命名問題吧，emit跟props一樣自訂命名， 03/25 23:27
7F：推 shter: 傳進去跟不傳進去應用的場合不同 03/25 23:27
8F：→ ssccg: 一樣設自訂命名的function，用typescript一樣能宣告type 03/25 23:30
9F：→ ssccg: 反而是emit還能寫對handler function傳入值的validation 03/25 23:31
10F：→ ssccg: (雖然emit不宣告也能直接$emit，props一定要宣告，讓有些人 03/25 23:32
11F：→ ssccg: 誤會props比較嚴謹) 03/25 23:32
12F：推 shter: 如果父子組件都是你自己寫的這樣搞當然沒關係 03/25 23:44
13F：→ shter: 但很多時候會有共用組件、組件庫，跨專案在使用單獨打包的 03/25 23:44
14F：→ shter: 這樣設計 :傳參數 @收事件 的作法比較單純，就是接口的型別 03/25 23:45
15F：→ shter: 掌握好就可以了，因為對應用層來說都是收事件參數而已 03/25 23:46
16F：→ shter: 如果要傳 Function 進去那使用方式說明上就會變得複雜 03/25 23:47
17F：→ shter: Vue 把每一區都設計的很單純，但也沒阻止你複雜的使用它 03/25 23:49
18F：→ ssccg: 還有一點是直接呼叫props傳進來的function跟用$emit不同， 03/26 00:41
19F：→ ssccg: 不會經過Vue.js的一些檢查，例如子元件unmounted後$emit就 03/26 00:42
20F：→ ssccg: 會被忽略，而function如果丟去非同步執行的callback那可能 03/26 00:44
21F：→ ssccg: 連父元件都unmounted了照樣執行下去 03/26 00:44
22F：→ ck574b027: 一樓的意思是 "$emit()" 跟 "f()" 可以幫助分辨handler 03/26 23:52
23F：→ ck574b027: 來源，用props就跟local函數搞混了 03/26 23:53
24F：推 ck574b027: 19F差別也太重要了吧，根本是會引起靈異事件的程度 03/27 00:09