PTT數位生活區 / Web_Design

[問題] Vue的子元件操作父元件的function

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