[问题] 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