Vue项目中常见问题(32)zoom放大镜展示数据

目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

1.父子通信props

 2.分析结构,替换数据:

---

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

1.父子通信props

我们可以从Detail/index.vue中看到,放大镜和小图列表是两个子组件,而数据是在Detai里面的skuInfo中的,所以我们父给子通信用props

代码这样改:

父亲Detail给了数据,现在要在Zoom.vue也就是放大镜里面收数据

在pages/Detail/Zoom子组件中收数据:

 接收了数据我们先在控制台看一眼,数据得到没

我们发现了通过props传递过来的数据skuImageList

 2.分析结构,替换数据:

我们会发现我们要的效果是左边一张图,右边一张大图:

 代码结构如下:

 因为默认显示第一张,所以应该是数据中数组的第0项的图片

 效果是出来了,但是又出来一个假报错,对程序没影响:

 为了找出问题我们在子组件Zoom.vue中打印一下:

打印结果是undefined:

 所以父亲给的数据有点问题,父亲给的数据至少是一个空数组,才不至于报错,不然我们替换数据的时候,用undefined[0].imgUrl肯定是会出问题的,因为万一服务器数据没有回来,就会出这种问题

所以我们在Detail/index.vue中这样改:

 skuImageList是[]的原因

 

这个时候我们会发现又报了这个错误:

 我们需要在子组件接收数据这里我们也进行一个判断:

skuimageList[0]是{}原因

 然后在子组件上面改一下:

 至此大图放大镜的功能实现了