Vue实战—实现商品详情页（12）

这篇我们来实现商品详情页面：

在首页点击某一商品会展示商品的详细信息。如下图所示：

创建good组件

创建一个组件 good

• transition 来定义页面展示的形式；
• 使用v-show与变量showFlag来控制显示与隐藏，ref配合BScroll控制页面的滑动；

• 现在结构内出现的数据的引用我们在script内进行处理。

处理数据，行为。

• 通过data监听showFlag的状态；
• 通过props传入父组件循环Foods而得到的food数据；
• 方法showView（）可以被父组件调用，稍后说明调用形式；
• 方法closeView（）绑定在模板退出图标上，用于关闭页面，重置变量showFlag为false；

• 方法addFirst（）用来添加一个商品数量；

food组件样式

在foods父组件内引用food组件

父组件中，selectedFood变量 默认没有选中任何商品

当我们通过showDetail()点击商品时候将所选择的food传入selectedFood；

通过父组件模板中ref="foodView与script标签内 this.$refs.foodView.showView()，调用子组件的方法显示详情页面。

注意变量名称不要与事件名称重复。方法名称与data一样的话，都可以通过this访问，会有覆盖风险。所以不要重复。

总结

我们先创建了good组件，定义了所依赖的数据，方法，

注意子组件的方法可以被父组件调用，我们了解父组件中调用子组件中的方法的方式。但是子组件不可以调用父组件的方法。

然后我们在父组件foods中引用了子组件。有个细节data中的变量名不要与方法名字重复，避免被this.xx访问到，从而覆盖掉，产生错误。我们也了解父组件调用子组件方法的方式。

如上图所示，我们实现了商品详情页。

下一篇我们来实现商品详情页面中的评价列表。