在Vue中,可以通过props属性将类别Id传递给产品列表组件。以下是一个示例:
data() {
return {
categoryId: 1 // 假设类别Id为1
}
}
<template>
<div>
<product-list :category-id="categoryId"></product-list>
</div>
</template>
props: {
categoryId: {
type: Number,
required: true
}
}
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获取对应的产品列表并展示在页面上。
领取专属 10元无门槛券
手把手带您无忧上云