在一个刀片视图中，我具有两个相同的组件。但是问题在于，vue组件中的功能存在冲突。

我使vue组件上载了文件，但是当我要使用第二个组件时会触发第一个组件中的功能。

如何防止vue组件中的两个相同功能发生冲突？

我有两个这样的组成部分：

<uploadfile
key="comp100"
:user_data="{{ Auth::user()->toJson() }}"
store_path="/users/{{ Auth::user()->username }}/settings/email_backgrounds"
:store_route="'settings.project_email'"
:size="1000"
fillmode="cover"
></uploadfile>

这：

<uploadfile
key="comp200"
:user_data="{{ Auth::user()->toJson() }}"
store_path="/users/{{ Auth::user()->username }}/settings/email_backgrounds"
:store_route="'settings.project_email'"
:size="1000"
fillmode="cover"
></uploadfile>

这是我的组件：

<template>
   <div class="vue-wrapper">
      <flashMessage position="right top"></flashMessage>
      <div v-if="loading" class="lds-dual-ring"></div>
      <div class="field">
         <div class="control">
            <label class="button main-button action-button m-t-20" for="uploadFiles"><span style="background-image: url('/images/icons/upload.svg')"></span>Kies bestand</label>
            <input type="file" name="uploadFiles" id="uploadFiles" class="dropinput" @change="selectFile">
         </div>
      </div>
   </div>
</template>

<script>

import { fb } from '../../firebase.js';

export default {
  data() {
   return {
      fileObject: {
         filePath: null,url: null,file: null,resizedPath: null
      },loading: false
   };
  },mounted() {
   console.log(this.size)
   console.log(this.fillmode)
  },props: [
   'user_data','store_path','store_route','size','fillmode'
  ],methods: {
    selectFile(event)
    {
      var file = event.target.files[0];

        this.fileObject.file = file
      this.fileObject.filePath = this.store_path + '/' + file.name
      this.fileObject.resizedPath = this.store_path + '/resized-' + file.name

      if(file.type == 'image/png' || file.type == 'image/jpeg')
      {
         this.uploadFile(this.fileObject)
      } else {
         this.flashMessage.success({
           title: 'Oeps!',message: 'De afbeelding moet een png of een jpeg zijn!',blockClass: 'success-message'
        });
      }

    },uploadFile(fileObject)
   {
      var vm = this
      console.log(fileObject)
      var storageRef = fb.storage().ref(fileObject.filePath)
      var uploadTask = storageRef.put(fileObject.file)

      this.loading = true

      uploadTask.on('state_changed',function(snapshot){
         var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      },function(error) {

      },function() {
         var resizeImage = fb.functions().httpsCallable('resizeImage')
         resizeImage({filePath: fileObject.filePath,contentType: fileObject.file.type,watermark: false,size: vm.size,fit: vm.fillmode}).then(function(result){
            var downloadRef = fb.storage().ref(fileObject.resizedPath);
            downloadRef.getDownloadURL().then(function(url){
               fileObject.url = url
               vm.loading = false
               vm.storeImage(fileObject)
            }).catch(function(error){
               console.log(error)
            })
         }).catch(function(error){
         });
      });
   },storeImage(file)
   {
      axios.post('/api/app/store_file',{
         api_token: this.user_data.api_token,user: this.user_data,file: file,storeRoute: this.store_route
      }).then((res) => {
         location.reload()
      }).catch((e) => {

      });
   }
 }
}
</script>