vue3实现购物车功能

实现购物车功能，可以通过以下步骤实现：

1. 创建一个商品列表组件，展示所有商品信息，包括商品名称、价格、图片等；
2. 在商品列表组件中，为每个商品添加一个“加入购物车”按钮；
3. 创建一个购物车组件，用于展示已选中的商品信息，包括商品名称、价格、数量等；
4. 在加入购物车按钮的点击事件中，将当前商品信息添加到购物车组件中；
5. 在购物车组件中，可以对已选中的商品进行增加、减少数量以及删除操作；
6. 在购物车组件中，需要实时计算已选中商品的总价并展示。

简单的代码实现如下：

// 商品列表组件
<template>
  <div>
    <div v-for="product in productList" :key="product.id">
      <div>{{ product.name }}</div>
      <div>{{ product.price }}</div>
      <div><img :src="product.image" alt=""></div>
      <div>
        <button @click="addToCart(product)">加入购物车</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productList: [
        {
          id: 1,
          name: '商品1',
          price: 100,
          image: 'xxx'
        },
        {
          id: 2,
          name: '商品2',
          price: 200,
          image: 'xxx'
        }
      ]
    }
  },
  methods: {
    addToCart(product) {
      this.$emit('add-to-cart', product)
    }
  }
}
</script>


// 购物车组件
<template>
  <div>
    <div v-for="(product, index) in cartList" :key="product.id">
      <div>{{ product.name }}</div>
      <div>{{ product.price }}</div>
      <div>
        <button @click="decreaseCount(index)">-</button>
        <span>{{ product.count }}</span>
        <button @click="increaseCount(index)">+</button>
        <button @click="removeFromCart(index)">删除</button>
      </div>
    </div>
    <div>总价：{{ totalPrice }}</div>
  </div>
</template>

<script>
export default {
  props: {
    cartList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    // 计算总价
    totalPrice() {
      return this.cartList.reduce((total, product) => {
        return total + product.price * product.count
      }, 0)
    }
  },
  methods: {
    // 增加数量
    increaseCount(index) {
      this.$emit('increase-count', index)
    },
    // 减少数量
    decreaseCount(index) {
      this.$emit('decrease-count', index)
    },
    // 删除商品
    removeFromCart(index) {
      this.$emit('remove-from-cart', index)
    }
  }
}
</script>

在父组件中，可以将商品列表组件和购物车组件都引入，并在父组件中维护一个状态，将已选中的商品列表作为参数传递给购物车组件。在父组件中，处理加入购物车、增加数量、减少数量以及删除商品的事件，并更新购物车组件中的状态。