vue3实现商品的增加功能

在Vue3中实现商品增加的功能通常会涉及到组件化开发，以下是简要步骤：

1. **创建组件**：首先，你可以创建一个名为`ProductForm`的表单组件，用于接收用户输入的商品信息，比如名称、价格等字段。

<template>
  <div>
    <input v-model="productName" placeholder="产品名称">
    <input type="number" v-model="productPrice" placeholder="产品价格">
    <!-- 其他需要的输入项... -->
    <button @click.prevent="addProduct">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productName: '',
      productPrice: ''
      // ...其他商品属性
    };
  },
  methods: {
    addProduct() {
      // 在这里处理添加逻辑
    }
  }
};
</script>

2. **提交数据**：`addProduct`方法会被触发当点击“添加”按钮时，通常会将数据发送给父组件或者通过Vuex管理状态。

methods: {
  addProduct() {
    this.$emit('product-added', { name: this.productName, price: this.productPrice });
    // 清空输入框
    this.productName = '';
    this.productPrice = '';
  }
}

3. **父组件接收并处理**：在父组件如`ProductList`或`ProductManager`中，监听`product-added`事件，并将新商品添加到列表或其他适当的地方。

<template>
  <div>
    <ProductForm @product-added="handleAddProduct"></ProductForm>
    <ul>
      <li v-for="(product, index) in products" :key="index">{{ product.name }} - {{ product.price }}</li>
    </ul>
  </div>
</template>

<script>
import ProductForm from './ProductForm.vue';

export default {
  components: {
    ProductForm
  },
  data() {
    return {
      products: []
    };
  },
  methods: {
    handleAddProduct(product) {
      this.products.push(product);
    }
  }
};
</script>