这篇说下如何实现点击商品，显示出商品详情页面的功能。新建个组件productDetail.vue，在good.vue中引入这个组件。这个组件中，设置个变量showDetail:false来控制显示隐藏。那么在父组件中，点击每个商品的li的时候，新建个方法，将这个商品的数据传输过去，并且通过ref让子组件显示。
<productdetail :food="selectFood" ref="foodView"></productdetail
<div class="food-wrapper" ref="foodScroll">
<ul>
<li class="food-item food-list-hook" v-for="(item,index) in food" >
<h3>{{item.name}}</h3>
<div class="food-detail" v-for="list in item.detail" @click="showProductDetail(list)">
<div class="title">{{list.name}}</div>
<div class="price">{{list.price + '元'}}</div>
<!-- 加减号 -->
<div class="cartcontrol-wrapper">
<cartcontrol :listItem="list"></cartcontrol>
</div>
</div>
</li>
</ul>
</div>
showProductDetail(list){
this.selectFood = list;
this.$refs.foodView.showView()
}
子组件中
data(){
return {
showDetail: false
}
},
props: {
food: {
default: Object
}
},
methods: {
closeProductDetail(){
this.showDetail = false
},
showView(){
this.showDetail = true;
}
}
这样就可以实现点击哪个商品，哪个商品的详情页便显示。功能如下：
Animation.gif
