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

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

Links booklink

Contact Us: admin [ a t ] ucptt.com