vue.js @emit 未被父级拾取

Question

在我的应用程序中，我的 ManageCards 组件中有一个表单，其中包含一个子组件 ImageUpload，该子组件向父组件发送图像文件及其本地 url：

 <form  class="mb-3" > 
                                      <div class="form-group">
                        <h4>{{card.description}}</h4>
                        <textarea  class="form-control" :placeholder="card.description" v-model="card.description">
                        </textarea>
                    </div>
                    <div>
                       <img  v-if="card.picture" class="img-circle" style="width:150px"  v-bind:src="card.picture"/>
                    </div>
                 
                    <div id="preview">
                    <h4> Preview</h4>
                  
                        <ImageUpload  :imgUrl="url" @newPicture="updatePicture"></ImageUpload> 
                
                 
                <button @click="addCard" type="button" class="btn btn-primary btn-block" style="color:white">Save</button>
            </form>

De addCard 方法调用 POST 命令向 api 发送信息：

   addCard(){
          
           const formData = new FormData();
           formData.append('title',this.card.title);
           formData.append('description',this.card.description);
           formData.append('imagefile',this.selectedFile);
           formData.append('game_id',this.currentGame.id);

SelectedFile 和 card.picture 应由发出的 updatePicture 方法填充：

      updatePicture(imageData){
            console.log("emit ontvangen");
            this.selectedFile = imageData.file;
            this.card.picture = imageData.picture;
            
        }

ImageUpload 组件本身看起来像：

<template>
    <div class="Image-Upload-wrapper Image-upload"> 
        <div>
                <input type="file" v-on:change="onFileChange" ref="fileUpload" id="file_picture_input">
                <label for ="file_picture_input" class="upload_picture_button"> Kies afbeelding</label>
        </div>
       

        <div id="croppie"> </div>     
        <div class="upload-wrapper">
            <button type="button" class="btn btn-primary btn-sm" v-on:click="setImage"> SetImage! <!-- type="button"" anders vervest de knop de hele pagina " -->                 Set image   
            </button>
        </div>   

    </div>
</template>



<script>
//  uitleg over Croppie::https://www.youtube.com/watch?v=kvNozA8M1HM
import Croppie from 'croppie';

export default {
    props:[
        'imgUrl'
    ],

    mounted(){
              this.setUpCroppie()
    },
    data(){
        return{
           croppie:null,
           croppieImage:'',
           selectedFile:'',
           picture:'',
           url:'',
        }
    },
    methods:{
        setUpCroppie(){
           let el = document.getElementById('croppie');
           this.croppie = new Croppie(el, {
               viewport:{width:200,height:200,type:'circle'},
               boundary:{ width:220,height:220},
               showZoomer:true,
               enableOrientation: true
           });
           this.croppie.bind({       
               url:this.url
           });
        },
        setImage(){
            this.croppie.result({
                type:'canvas',
                size:'viewport'
            })
            .then(blob =>fetch(blob))
            .then(res => {return res.arrayBuffer();})
            .then(buf => {return new File([buf], this.croppieImage.name, {type:'image/png'});})
            .then(file => { 
                this.croppieImage = file;
                this.picture = URL.createObjectURL(this.croppieImage);
                const imageData={
                    picture:this.picture, 
                    file: this.croppieImage
                };
                console.log("klaar voor emit...?");
                this.$emit('newPicture', imageData);
                this.url='';
            })
        },
        onFileChange(e){ 
            if (e.target.files && e.target.files.length > 0) {
                this.selectedFile = e.target.files[0];
                console.log("gekozen file is: " + this.selectedFile.name);
                this.url = URL.createObjectURL(this.selectedFile);
                this.croppie.bind({
                    url: this.url
            });
            } else {
            // Geen afbeelding geselecteerd, instellen op een standaardwaarde (bijv. een lege string)
            this.selectedFile = null;
            this.url = '';
            }
        }
    },
  
}
</script>

在控制台中，我确实看到：“klaar voor emmit...？”，来自 chold 组件中的 setImage 方法。 我没有从父级的emit方法中看到“emit ontvangen”。 因此，POST 命令的必填字段也未填充。

任何人都可以看到我犯了什么（可能是愚蠢的）错误吗？

Answer 1

子元素需要声明emit。

选项API

export default {
  emits: ['first-emit-name', 'second-emit-name'],
}

组合API

const emits = defineEmits(['first-emit-name', 'second-emit-name'])