我应该将上传功能放在 Vue 组件中的哪个位置？

Question

我有一个ImageUploader 组件，我通过它在我的项目中上传图片。

目前需要使用不同的端点进行上传，我想重构这个组件。

我看到了两种方式：

1. 我可以使用this.$emit(onUpload, files)将上传方法移动到父组件，在父组件中：<ImageUploader @onUpload='uploadHandler'/>

2. 在将用于加载的组件中将操作作为道具传递 <ImageUploader :uploadAction="AProjectMedia.UPLOAD_IMAGE" />，并在组件中这样使用：this.$store.dispatch(uploadAction, files)

我的选择有多正确？还有哪些选择？

Answer 1

第一个似乎更好，因为它使您的组件保持清洁以达到一个目的（上传文件）。任何副作用都应该由父母处理。这样，父组件（它们是不同的）负责不同的功能。

另一种选择是直接从子组件调用操作，但如果您的目标是可重用性，这可能是一个问题。

Answer 2

我会说 1 号更好。根据最佳实践，组件之间的通信有两种方式：

Parent -> Child 通过 道具;

Child -> Parent 通过事件；

有关详细信息，请参阅this article。即使我使用 Vuex，我也更喜欢这种通信模式，而不是从子组件调用 action/getter。