【Vue3】官网项目･Vue Mastery Sock-6（组件间的事件传递）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

不知道有没有同学发现，在上一步的组件化以后，不可避免的出现了点击添加购物车，但是右上角的购物车数量并不会增加，这篇文章就是来解决这个问题的，即组件之间的事件传递。

实现目标

在组件间的操作事件的传递

1. 事件传递

2. 参数传递

1. 事件传递

实现步骤

1. 修改📄components/ProductDisplay.js文件中的addToCart()函数

    addToCart() {
      this.$emit('add-to-cart')
    }

2. 在index.html中添加@add-to-cart接收components/ProductDisplay.js传来的点击事件

 <product-display :premium="premium" @add-to-cart="updateCart"></product-display>

3. 在main.js中添加updateCart()函数

 updateCart() {
            this.cart += 1
        }

捋下调用关系

在触发了ProductDisplay.js中的点击事件@click="addToCart"后，会找到ProductDisplay.js中的methods中的addToCart()，然后通过addToCart()中的this.$emit('add-to-cart')将这个事件传递给index.html中的<product-display</product-display>组件中的@add-to-cart，再通过@add-to-cart="updateCart"调用index.html中的updateCart()方法。

测试效果

2. 参数传递

实现步骤

1. 修改main.js中的参数cart的类型为数组

2. 修改main.js中的方法updateCart()

3. 在ProductDisplay.js中的addToCart()参数中添加代表选择的产品颜色序号的参数

addToCart() {
      this.$emit('add-to-cart', this.variants[this.selectedVariant].id)
    }

执行下瞅一眼

4. 将显示产品的序号修改为显示cart[]的数量

 <div class="cart">Cart({{ cart.length }})</div>

测试效果

嘿嘿嘿٩(˃̶͈̀௰˂̶͈́)و搞定(｡･ω･｡)ﾉ🎉ﾉ🎉ﾉ🎉～～～