子组件代码

Question

我需要当用户单击子组件上的按钮时，父组件会收到cart.lenght并被分配元素的count属性。

子组件代码

<q-btn flat round color="faded" icon="fas fa-shopping-cart" @click="cart(item.id)"/>

cart: function (Id) {
      let cart = []
      cart.push(Id)
      this.$emit('totalItensCart')
      this.$q.localStorage.set('cart', cart)
}

如何在父组件的cart.length属性中显示count值？

父组件代码

 <q-route-tab
        count="5"
        icon="fas fa-cart-plus"
        to="/cart"
        exact
 slot="title"/>

Answer 1

根据vue event documentation，我们希望将事件从子组件发送到父组件。您使用this.$emit方法是正确的，但是它可以采用两个参数来传递数据，例如：

this.$emit("name", data);

因此，让我们从第一个孩子中得出购物车中商品的数量：

this.$emit("cartUpdate", cart.length);

现在，我们需要在父级中处理此问题。我们首先需要一个data属性来跟踪父级中的totalCartItems：

data: function () {
    return {
        totalCartItems: null
    }
}

假设您的两个代码段都在 same 父级的不同子级中，并且第一个子级（发出cartUpdate的子级）具有组件名称first-child：

<first-child @cartUpdate="cartUpdate"></first-child>

每当孩子发出名为cartUpdate()的事件（使用@ shorthand for v-on）时，这将在父组件中调用cartUpdate方法。该方法非常简单，仅更新父级中的totalCartItems数据属性：

cartUpdate: function (totalCartItems) {
    this.totalCartItems = totalCartItems;
}

最后，让我们通过将其绑定到数据值来确保在第二个子组件中对其进行更新：

<q-route-tab
        :count="totalCartItems"
        icon="fas fa-cart-plus"
        to="/cart"
        exact
 slot="title"/>

在子事件中发生事件后立即通知父组件吗？

子组件代码

父组件代码

1 个答案: