（十四）商品详情页实现

朴灿烈づ我的快乐病毒、 2022-05-25 01:56 217阅读 0赞

在购物的时候，我们在打开goods页面的时候，每点击其中一种具体的food的时候，都会有一个商品的详情页，该页面就是介绍该商品的一些具体的细节。如下图所示：

![20180506092347549][]

图1

当我们点击红色框中的任意一个food的时候，都会有该商品详情页缓慢过渡进来，如下图所示

![20180506092912923][]

图2

当我们点击图2中左上角 的向左箭头的时候，图2又隐藏掉，出现图1的界面。

当点击任意一种商品的时候，会出现商品的详情页，这个详情页可以独立成一个food组件，这个food组件的数据是来自goods组件的，所以要将<food>组件添加到goods组件中。

1、food.vue中<template>内容如下，food页面的显示和隐藏有一个动画的过程

2、food.vue中<script>中的内容如下

3、food.vue中的<template>中的<style>内容如下

4、在父组件goods.vue中引进food.vue

![20180506094152784][]

5、在goods.vue中的<template>中引用<food>组件，注意在<template>下直系子元素只能有一个，否则会报错

![2018050609560079][]

在这里通过绑定属性:food="selectedFood"将选中的food对象传递给子组件food，ref="food"，通过this.$refs.food获取到<food>这个DOM元素，然后就可以在父组件里面调用子组件定义的方法了，具体如下：

首先，在goods.vue中的data()定义变量selectedFood，如下图所示：

![20180506100014337][]

这个selectedFood存放的是一个对象，表示被选中的food对象，通过点击相应的food，将food保存在selectedFood中，如下图所示：

![20180506100412311][]

selectFood(food,$event)在goods.vue中的methods中定义，主要有两个功能：将点击的food保存在selectedFood中；调用子组件<food>中的方法show()，显示商品详情页

//将点击的相应的food放到数据this.selectedFood中，然后传递给子组件
            //其次调用子组件<food>在methods中定义的方法show()
            //这种方式定义的函数是可以被外部调用的
            selectFood(food,event){
              //不是自定义事件
              if(!event._constructed){
                return;
              }
              //将点击的food对象存放到this.selectedFood中
              this.selectedFood = food;
              // 在父组件中调用<food>中在methods定义的方法show()，显示商品详情页
              this.$refs.food.show();
            }

[20180506092347549]: /images/20220525/ff9276d7084e4b0181c48b86ea743714.png
[20180506092912923]: /images/20220525/ec1b845200ab49aaa4ce5f65c6c07da2.png
[20180506094152784]: /images/20220525/d45361848ddf48dcb45515feb7b0293a.png
[2018050609560079]: /images/20220525/1cd4e790740c40b9bc516d3d3788fe95.png
[20180506100014337]: /images/20220525/ef58fb99df3349b6b1ed4b7e6c76b55b.png
[20180506100412311]: /images/20220525/6a4b93bf5a7d47f2bc4e089eaf6c2fa0.png