Vue js：this.$emit 不是函数

Posted 2023-02-23

【中文标题】Vue js：this.$emit 不是函数

【英文标题】：Vue js : _this.$emit is not a function

【发布时间】：2017-08-21 18:39:33

【问题描述】：

我创建了一个 Vue 组件调用 imageUpload 并将属性作为 v-model 传递

<image-upload v-model="form.image"></image-upload>

在imgeUpload 组件内 我有这个代码

<input type="file" accept="images/*" class="file-input" @change="upload">

upload:(e)=>

    const files = e.target.files;
    if(files && files.length > 0)
        console.log(files[0])
        this.$emit('input',files[0])
     
    

我收到了

未捕获的类型错误：_this.$emit 不是函数

谢谢

【参考方案1】：

不要用粗箭头定义你的方法。使用：

upload: function(e)
    const files = e.target.files;
    if(files && files.length > 0)
        console.log(files[0])
        this.$emit('input',files[0])

    
 

当您使用粗箭头定义方法时，您将捕获词法范围，这意味着 this 将指向包含范围（通常是 window 或 undefined），而不是 Vue。

【参考方案2】：

如果 $emit 不在 this 的当前上下文/引用中，则此错误会出现，可能是在您使用 promise 的 then 或 catch 方法时。在这种情况下，在 Promise 之外捕获对 this 的引用，然后使用，这样对 $emit 的调用就成功了。

<script type="text/javascript">
var Actions = Vue.component('action-history-component', 
        template: '#action-history-component',
        props: ['accrual'],
        methods: 
            deleteAction: function(accrualActionId) 
                var self = this;
                axios.post('/graphql',
                    
                        query:
                            "mutation($accrualId: ID!, $accrualActionId: String!)  deleteAccrualAction(accrualId: $accrualId, accrualActionId: $accrualActionId)  accrualId accrualRate name startingDate lastModified hourlyRate isHeart isArchived minHours maxHours rows  rowId currentAccrual accrualDate hoursUsed actions  actionDate amount note dateCreated   actions accrualActionId accrualAction actionDate amount note dateCreated  ",
                        variables: 
                            accrualId: this.accrual.accrualId,
                            accrualActionId: accrualActionId
                        
                    ).then(function(res) 
                    if (res.data.errors) 
                        console.log(res);
                        alert('errors');
                     else 
                        self.$emit('accrualUpdated', res.data.data.deleteAccrualAction);
                    
                ).catch(function(err) 
                    console.log(err);
                );
            
        
    );

【参考方案3】：

您可以使用upload(e) 而不是upload:(e)=> 来编写简短的方法，以使这一点指向组件。

这是完整的例子

watch: 
    upload(e) 
        const files = e.target.files;
        if(files && files.length > 0) 
            console.log(files[0]);
            this.$emit('input',files[0]);