如何将类别Id传递给vue的产品列表？

在Vue中，可以通过props属性将类别Id传递给产品列表组件。以下是一个示例：

在父组件中，定义一个data属性来存储类别Id：

data() {
  return {
    categoryId: 1 // 假设类别Id为1
  }
}

在父组件的模板中，使用子组件并将类别Id通过props传递给子组件：

<template>
  <div>
    <product-list :category-id="categoryId"></product-list>
  </div>
</template>

在子组件中，接收父组件传递的类别Id，并在组件的props属性中声明：

props: {
  categoryId: {
    type: Number,
    required: true
  }
}

子组件可以使用接收到的类别Id来获取对应类别的产品列表：

data() {
  return {
    products: [] // 存储产品列表
  }
},
created() {
  // 根据类别Id获取产品列表的逻辑
  this.fetchProductsByCategoryId(this.categoryId);
},
methods: {
  fetchProductsByCategoryId(categoryId) {
    // 发起请求或执行相应的逻辑来获取产品列表
    // 示例：使用axios发送GET请求
    axios.get(`/api/products?categoryId=${categoryId}`)
      .then(response => {
        this.products = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
}

这样，通过将类别Id传递给Vue的产品列表组件，可以根据不同的类别Id获取对应的产品列表并展示在页面上。