这篇说下如何实现点击商品，显示出商品详情页面的功能。新建个组件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