我想知道如何从.js文件(提供文件上传服务的类)向组件发出事件。我的想法是为进度UI元素发出四个事件。
我的服务.js文件如下:
import Vue from 'vue';
export const UploaderService = new Vue({
methods: {
orchestrateDataPublication() {
return new Promise((resolve, reject) => {
if (this.checkRequiredData()) {
// emit 25% done
this._getSignedUrl().then(signedUrlResponse => {
// emit 50% done
this._uploadDataset(signedUrlResponse).then(uploadResponse => {
以此类推。
这被导入Vue组件内部:
<script>
import {UploaderService} from '../service/uploaderService.js'
export default {
upload () {
this.$refs['datasetForm'].validate((valid) => {
if (valid) {
UploaderService.orchestrateDataPublication().then((response) => {
this.$emit(response.type, response.data)
}, (err) => {
this.$emit(err.type, err.data)
})
} else {
this.$emit('appInforms', ' -PLEASE, check all your inputs- ')
}
})
}
在这里,上载将orchestrateDataPublication用作承诺,但是我需要以某种方式发出事件。这可能吗?
答案 0 :(得分:1)
由于UploaderService
本身是一个Vue
实例,因此可以使用其$on
方法监听事件,而使用$emit
方法调度事件。上传完成后,您可以使用$off
停止收听进度事件。
在upload()
中,为我们称为“进度”的事件设置事件监听器,然后调用UploaderService.orchestrateDataPublication()
,并在其then
回调中停止监听进度事件:>
upload() {
UploaderService.$on('progress', progress => console.log({ progress }));
UploaderService.orchestrateDataPublication().then(message => {
console.log({ message });
UploaderService.$off('progress');
});
}
在UploaderService.orchestrateDataPublication()
中,发出如下进度事件:
this.$emit('progress', 0.75); // 75% complete
注意:如果项目允许ES2017,则可以使用async
/ await
减轻回调嵌套,如此codesandbox所示。