父组件(商品详情页)

子组件上边放大图

 

底下缩小轮播图

 

 需求分析：父组件获取图片数据，传给底下子组件进行进行轮播，实现父组件给子组件传参。然后底下子组件轮播后，把当前图片下标给父组件，实现子组件给父组件传参。父组件然后把要展示的图片下标以及数据给上边组件，实现兄弟组件传参。

第一步：父组件获取数据传给子组件

父组件获取数据的json数据

let s = `{"code": 200,"message": "成功","data": {"valuesSkuJson": "{\\"3\\":3}","price": 5999,"categoryView": {"id": 61,"category1Id": 2,"category1Name": "手机","category2Id": 13,"category2Name": "手机通讯","category3Id": 61,"category3Name": "手机"},"spuSaleAttrList": [{"id": 2,"spuId": 1,"baseSaleAttrId": 2,"saleAttrName": "版本","spuSaleAttrValueList": [{"id": 3,"spuId": 1,"baseSaleAttrId": 2,"saleAttrValueName": "8G+128G","saleAttrName": "版本","isChecked": "1"}]}],"skuInfo": {"id": 1,"spuId": 1,"price": 5999,"skuName": "小米10 至尊纪念版 双模5G 骁龙865  120W快充 8GB+128GB 陶瓷黑 游戏手机","skuDesc": "小米10 至尊纪念版 双模5G 骁龙865 120HZ高刷新率 120倍长焦镜头 120W快充 12GB+256GB 陶瓷黑 游戏手机","weight": "1.00","tmId": 1,"category3Id": 61,"skuDefaultImg": "http://39.98.123.211/group1/M00/00/01/rBHu8l-rfvmAIpgZAAIvrX6L9fo612.jpg","isSale": 1,"createTime": "2021-12-10 09:31:42","skuImageList": [{"id": 1,"skuId": 1,"imgName": "ead186426badb626.jpg","imgUrl": "http://39.98.123.211/group1/M00/00/01/rBHu8l-rfvmAHpFuAACTenfIJWo734.jpg","spuImgId": 2,"isDefault": "0"},{"id": 2,"skuId": 1,"imgName": "b58ab2d79b859f39.jpg","imgUrl": "http://39.98.123.211/group1/M00/00/01/rBHu8l-rfvmAcbl2AAFopp2WGBQ404.jpg","spuImgId": 3,"isDefault": "0"},{"id": 3,"skuId": 1,"imgName": "0d93a071c839d890.jpg","imgUrl": "http://39.98.123.211/group1/M00/00/01/rBHu8l-rfvmATs5EAABriLbF9vE207.jpg","spuImgId": 4,"isDefault": "0"},{"id": 4,"skuId": 1,"imgName": "a7b1125239354d0d.jpg","imgUrl": "http://39.98.123.211/group1/M00/00/01/rBHu8l-rfvmAeWopAAEtpBjP1VQ788.jpg","spuImgId": 5,"isDefault": "0"},{"id": 5,"skuId": 1,"imgName": "6029cb2c2b2c7668.jpg","imgUrl": "http://39.98.123.211/group1/M00/00/01/rBHu8l-rfvmAZJX2AAGmVo8Tz9s683.jpg","spuImgId": 6,"isDefault": "0"},{"id": 6,"skuId": 1,"imgName": "2ff0882c9607e57c.jpg","imgUrl": "http://39.98.123.211/group1/M00/00/01/rBHu8l-rfvmAIpgZAAIvrX6L9fo612.jpg","spuImgId": 1,"isDefault": "1"}],"skuAttrValueList": [{"id": 1,"attrId": 106,"valueId": 176,"skuId": 1,"attrName": "手机一级","valueName": "安卓手机"},{"id": 2,"attrId": 107,"valueId": 177,"skuId": 1,"attrName": "二级手机","valueName": "小米"},{"id": 3,"attrId": 23,"valueId": 83,"skuId": 1,"attrName": "运行内存","valueName": "8G"},{"id": 4,"attrId": 24,"valueId": 82,"skuId": 1,"attrName": "机身内存","valueName": "128G"}],"skuSaleAttrValueList": [{"id": 1,"skuId": 1,"spuId": 1,"saleAttrValueId": 1,"saleAttrId": 1,"saleAttrName": "颜色","saleAttrValueName": "陶瓷黑"},{"id": 2,"skuId": 1,"spuId": 1,"saleAttrValueId": 3,"saleAttrId": 2,"saleAttrName": "版本","saleAttrValueName": "8G+128G"}]}},"ok": true
}`;

使用 JSON.parse 方法将 JSON 字符串转换为 JavaScript 对象

let data =ref(JSON.parse(s).data);

把数据传给下方子组件

<spec-scroll :imgList="data.skuInfo.skuImageList" @getIndex="getIndex"></spec-scroll>

下方子组件接收父亲数据

import {defineProps , defineEmits} from "vue"
let props = defineProps(["imgList"]);
let emits = defineEmits(["getIndex"]);
function handler(v){//将v传递给父组件emits("getIndex",v)
}

进行数据展示

    <el-carousel @change="handler" ><el-carousel-item v-for="item in props.imgList" :key="item.id"><div class="carousel-image-container"><img :src="item.imgUrl" alt="Carousel Image" class="carousel-image"></div></el-carousel-item></el-carousel>

第二步子组件把自己下标通过父组件函数传给父组件

父组件子组件获取下标

let index = ref(0);
function getIndex(v){console.log("组件的下标:"+v)index.value = v;
}

第三步父组件把下方组件下标和数据给上方组件

<preview :imgList="data.skuInfo.skuImageList" :index="index"></preview>

上方组件接收父亲给的下标和数据

import { defineProps } from 'vue';
// 定义 props
const props = defineProps({index: {type: Number,required: true},imgList: {type: Array,required: true}
});

最后展示图片

  <div class="preview"><div class="jqzoom"><!-- 动态绑定 img 的 src 属性 --><img :src="props.imgList[props.index].imgUrl" alt="Preview Image" /></div></div>