Question

我正在尝试向组件的祖父母发送事件，为此，我想从孙子向他的父母发送事件，然后向他的父母发送另一个事件。

但是，在不知道为什么要从大子组件中发出时，我不断收到此错误。

TypeError：无法读取未定义的属性'$ emit'

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

祖父母：“编辑”

父级：“菜单”

孩子：“模态新项目”

大子组件（modal-new-item）在发出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是子级组件，他的父级（菜单）接收到这样的事件：

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

我做错了什么？我不明白大子组件在控制台中引发的错误。

感谢您的帮助！

Answer 1

这就是您声明函数的方式。

使用ES5时，this是指该功能。您要引用该组件，因此需要以不同的方式绑定它。

function () {}-> this引用此函数的作用域。 () => {}-> this被保留，引用了该组件。

更改此：

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

对此：

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

更多阅读内容：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

为了更清楚一点，抛出了该错误，因为它期望函数作用域具有$ emit属性。通过保留this绑定，它将检查组件是否具有$ emit属性。

尝试从组件向其祖父母触发事件时未触发事件

1 个答案: