Vue js：_this.$emit 不是一个函数

Question

我创建了一个 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])
     }
}

我收到了

Uncaught TypeError: _this.$emit is not a function

谢谢

Answer 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。

Answer 2

您可以使用 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]);
        }
    }
}

Answer 3

如果 $emit 不在 this 的当前 context/reference 上，可能会出现此错误，也许当您在承诺的 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);
                });
            }
        }
    });

Vue js：_this.$emit 不是一个函数

Vue js : _this.$emit is not a function

vue-component

vuejs2