這篇說(shuō)下如何實(shí)現(xiàn)點(diǎn)擊商品，顯示出商品詳情頁(yè)面的功能。新建個(gè)組件productDetail.vue，在good.vue中引入這個(gè)組件。這個(gè)組件中，設(shè)置個(gè)變量showDetail:false來(lái)控制顯示隱藏。那么在父組件中，點(diǎn)擊每個(gè)商品的li的時(shí)候，新建個(gè)方法，將這個(gè)商品的數(shù)據(jù)傳輸過(guò)去，并且通過(guò)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>
                        <!-- 加減號(hào) -->
                        <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;
            }
        }

這樣就可以實(shí)現(xiàn)點(diǎn)擊哪個(gè)商品，哪個(gè)商品的詳情頁(yè)便顯示。功能如下：

Animation.gif