Javascript 尝试将事件从组件激发到其祖父母时未激发事件

我试图向组件的祖父母发出一个事件，为此，我希望将一个事件从孙辈向其父辈发出，然后向其父辈发出另一个事件

然而，当我从grand child组件发射时，我一直在不知道为什么会出现这个错误

TypeError:无法读取未定义的属性“$emit”

我这里有三个部分（从祖父母到他的孙子）：

祖父母：“编辑”

父项：“菜单”

子项：“模式新项”

grand child组件（模式新项）在发出axios post请求后发出一个事件，如下所示：

axios
                    .post('/menusV2/newItem', {
                    orderId: this.order.orderId,
                    type: this.newType,
                    itemId: this.newItem.value,
                    meal: this.newMeal,
                    category: this.newCategory,
                    noOfServing: this.newNoOfServing
                    })
                    .then(function(){
                            this.$emit('newItem');
                            this.onReset();
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

<modal-new-item :order="order" :show="showModal" @newItem="newItem"></modal-new-item>

    newItem(){
        this.showModal = false;
        this.$emit('newItem');
    },

            <Menu @newItem="refreshMenu"  @itemDeleted="refreshMenu" :order="menu" :menuItems="items" :specifications="specifications" :nutritionalValues="nutritionalValues"></Menu>

孙子组件的父组件（菜单）接收事件并发出另一个事件，如下所示：

axios
                    .post('/menusV2/newItem', {
                    orderId: this.order.orderId,
                    type: this.newType,
                    itemId: this.newItem.value,
                    meal: this.newMeal,
                    category: this.newCategory,
                    noOfServing: this.newNoOfServing
                    })
                    .then(function(){
                            this.$emit('newItem');
                            this.onReset();
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

<modal-new-item :order="order" :show="showModal" @newItem="newItem"></modal-new-item>

    newItem(){
        this.showModal = false;
        this.$emit('newItem');
    },

            <Menu @newItem="refreshMenu"  @itemDeleted="refreshMenu" :order="menu" :menuItems="items" :specifications="specifications" :nutritionalValues="nutritionalValues"></Menu>

模态新项是grand child组件，其父项（菜单）接收如下事件：

axios
                    .post('/menusV2/newItem', {
                    orderId: this.order.orderId,
                    type: this.newType,
                    itemId: this.newItem.value,
                    meal: this.newMeal,
                    category: this.newCategory,
                    noOfServing: this.newNoOfServing
                    })
                    .then(function(){
                            this.$emit('newItem');
                            this.onReset();
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

<modal-new-item :order="order" :show="showModal" @newItem="newItem"></modal-new-item>

    newItem(){
        this.showModal = false;
        this.$emit('newItem');
    },

            <Menu @newItem="refreshMenu"  @itemDeleted="refreshMenu" :order="menu" :menuItems="items" :specifications="specifications" :nutritionalValues="nutritionalValues"></Menu>

总父组件（编辑）从上一个组件（菜单）接收事件，如下所示：

axios
                    .post('/menusV2/newItem', {
                    orderId: this.order.orderId,
                    type: this.newType,
                    itemId: this.newItem.value,
                    meal: this.newMeal,
                    category: this.newCategory,
                    noOfServing: this.newNoOfServing
                    })
                    .then(function(){
                            this.$emit('newItem');
                            this.onReset();
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

<modal-new-item :order="order" :show="showModal" @newItem="newItem"></modal-new-item>

    newItem(){
        this.showModal = false;
        this.$emit('newItem');
    },

            <Menu @newItem="refreshMenu"  @itemDeleted="refreshMenu" :order="menu" :menuItems="items" :specifications="specifications" :nutritionalValues="nutritionalValues"></Menu>

我做错了什么？我不理解grand child组件在控制台中抛出的错误

---

谢谢你的帮助

这是您声明函数的方式

使用ES5时，

此

指的是功能。您希望引用组件，因此需要以不同的方式绑定它

function（）{}

->

此

引用此函数的作用域。

（）=>{}

->

此

被保留，引用组件

更改此项：

.then(function(){
                 this.$emit('newItem');
                 this.onReset();
               })

为此：

.then(() => {
             this.$emit('newItem');
             this.onReset();
            })

更多阅读：

为了更清楚一点，抛出错误是因为它希望函数作用域具有$emit属性。通过保留

此

绑定，它将检查组件是否具有$emit属性