作者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/cn.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