关于使用props和定义emits的一点疑问

Question

老师你好，这节课里有如下代码，

	{
		emits: ['file-uploaded', 'file-uploaded-error'],
		props:{
			beforeUploaded:{
				type: Function as PropType<CheckFunction>
			}
		}
	}

经过尝试，发现下面的写法好像也是可以的

	{
		props:{
			beforeUploaded:{
				type: Function as PropType<CheckFunction>
			},
			onFileUploaded:{
				//...
			},
			onFileUploadedError:{
				// ...
			}			
		}
	}

老师，我的问题是
1> 以上两种写法有什么本质上的区别嘛？
2> 如果没有的话，那么这些我们为什么需要emit这个字段以及使用emit(‘事件名’,payload)呢？是为了更清晰的表达出一个组件有哪些事件嘛？

Answer 1

RamirezNi 2021-06-18 22:19:58

emit只是uploader对消费组件（也就是调用uploader的组件）派发的一个事件，但不能直接通过emit派发的事件对uploader组件内部逻辑进行干预，简单说就是通知你一下走到这一步了，就像7点闹钟响了，响了就是告诉你现在7点了，你并不能把时间怎么样，时间依然继续走。

通过props传入的话，比如课程中的beforeupload，组件设计传入这个函数是需要返回boolean类型的值，uploader内部执行消费组件传入的函数得到结果，根据结果可以return或者提示用户等等其他逻辑。比如消费组件拿到beforeupload传递的文件就可以去判断是否符合特定格式 特定大小，超过某大小返回false就可以打断upload上传后续的逻辑

• 提问者 慕莱坞0998854 #1

  你好，我觉得你没有理解我提的问题，就假如说，我们在<template>中写的@customEvent="xxx"，其实会被编译为{onCustomEvent : xxx},所以我才想问老师为什么我们需要在子组件中emit(someEvent, param) ,而不是直接写props.onSomeEvent(param)好了。(我也是小白，如果有错误的地方请指出)

Answer 2

张轩 2021-04-29 09:23:10

同学你好 这是两个概念啊 props 是属性 代表着从一个组件从外面接受到的属性 第二个是事件 代表组件向外发射的事件，在组件上使用 @ 来接收。

如果你用过 React 中的话，它就是你说的这种只有一个属性的概念，而vue 中组件向外传递信息一般都使用事件。当然用函数属性的方式也是可以的。

• 提问者 慕莱坞0998854 #1

  谢谢老师的解答！我现在的水平还不太能理解这两个的区别，相信以后再来看这个问题的话可能更清楚！

• Best_Coder_LCN 回复 提问者 慕莱坞0998854 #2

  父子组件传值重看下呀，props是用来接收父组件传递到子组件的参数的，emit是子组件传值给父组件的。