According to Vue, we should use kebab-case events

For more information, see here: https://vuejs.org/v2/guide/components-custom-events.html#Event-Names

Modules/Media/Assets/js/components/MultipleMedia.vue

@@ -72,7 +72,7 @@
             },
             unSelectMedia(id) {
                 this.selectedMedia = _.reject(this.selectedMedia, media => media.id === id);
-                this.$emit('fileUnselected', { id, zone: this.zone });
+                this.$emit('file-unselected', { id, zone: this.zone });
             },
             fetchMedia() {
                 axios.get(route('api.media.get-by-zone-and-entity', {
@@ -83,7 +83,7 @@
                     .then((response) => {
                         this.selectedMedia = response.data.data;
                         _.forEach(this.selectedMedia, (file) => {
-                            this.$emit('multipleFileSelected', { id: file.id, zone: this.zone });
+                            this.$emit('multiple-file-selected', _.merge(file, { zone: this.zone }));
                         });
                     });
             },
@@ -95,13 +95,13 @@
             if (this.entityId) {
                 this.fetchMedia();
             }
-            this.eventName = `fileWasSelected${this.randomString()}${Math.floor(Math.random() * 999999)}`;
+            this.eventName = `file-was-selected${this.randomString()}${Math.floor(Math.random() * 999999)}`;
 
             this.$events.listen(this.eventName, (mediaData) => {
                 if (_.find(this.selectedMedia, mediaData) === undefined) {
                     if (!this.selectedMedia) this.selectedMedia = [];
                     this.selectedMedia.push(mediaData);
-                    this.$emit('multipleFileSelected', _.merge(mediaData, { zone: this.zone }));
+                    this.$emit('multiple-file-selected', _.merge(mediaData, { zone: this.zone }));
                 }
             });
         },

Modules/Media/Assets/js/components/SingleMedia.vue

@@ -73,7 +73,7 @@
             },
             unSelectMedia() {
                 this.selectedMedia = {};
-                this.$emit('singleFileSelected', _.merge({ id: null }, { zone: this.zone }));
+                this.$emit('single-file-selected', { id: null, zone: this.zone });
             },
             fetchMedia() {
                 axios.get(route('api.media.find-first-by-zone-and-entity', {
@@ -82,7 +82,7 @@
                         entity_id: this.entityId,
                     }))
                     .then((response) => {
-                        this.$emit('singleFileSelected', _.merge(response.data.data, { zone: this.zone }));
+                        this.$emit('single-file-selected', _.merge(response.data.data, { zone: this.zone }));
                         this.selectedMedia = response.data.data;
                     });
             },
@@ -94,12 +94,12 @@
             if (this.entityId) {
                 this.fetchMedia();
             }
-            this.eventName = `fileWasSelected${this.randomString()}${Math.floor(Math.random() * 999999)}`;
+            this.eventName = `file-was-selected${this.randomString()}${Math.floor(Math.random() * 999999)}`;
 
             this.$events.listen(this.eventName, (mediaData) => {
                 this.dialogVisible = false;
                 this.selectedMedia = mediaData;
-                this.$emit('singleFileSelected', _.merge(mediaData, { zone: this.zone }));
+                this.$emit('single-file-selected', _.merge(mediaData, { zone: this.zone }));
             });
         },
     };

Modules/Page/Assets/js/components/PageForm.vue

@@ -147,7 +147,7 @@
                             </el-form-item>
                             <tags-input namespace="asgardcms/page" v-model="tags" :current-tags="tags"></tags-input>
 
-                            <single-media zone="image" @singleFileSelected="selectSingleFile($event, 'page')"
+                            <single-media zone="image" @single-file-selected="selectSingleFile($event, 'page')"
                                           entity="Modules\Page\Entities\Page" :entity-id="$route.params.pageId"></single-media>
                         </div>
                     </div>