前端(组件传参案例)

父组件(商品详情页)

子组件上边放大图

底下缩小轮播图

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

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

父组件获取数据的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>