vue 之 商品列表的左右联动

最新推荐文章于 2023-07-13 16:39:26 发布
最新推荐文章于 2023-07-13 16:39:26 发布
阅读量2.1k 收藏 34
点赞数 8
分类专栏： vue移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47409897/article/details/111406670
版权

目录

vue 之 商品列表的左右联动

在这里插入图片描述

思路

  • 1：初始化的时候，左右两侧实现 可以滚动
    • 监听右侧的滚动事件，把具体的滚动y轴的值，赋值给 scrollY
  • 2：然后计算出右侧的每一个板块的距离顶部高度，为一个高度数组
  • 3：计算属性之中，设置当前高亮 返回当前索引
    • 需要找到当前索引，然后根据这个高度数组，和scrollY进行比较，需要返回那个索引
  • 4：点击左侧切换的时候，拿当前的索引号，然后再拿到右侧的滚动位置，赋值给scrollY，最后调用右侧的滚动事件
  • 5：右侧滚动时候，实现左侧的联动，
    • 先拿到当前索引（这需要在计算属性之中的，获取当前索引内调用）
    • 然后拿到右侧的 每一个li中的ul父节点，这个一个外容器
    • 在拿到当前的节点，最后滚动到该节点

实现代码

<!--  -->
<template>
  <div class="chat_wrap">
    <div class="shop">
      <div class="menu_wrap">
        <ul>
          <li
            v-for="(item, index) in leftD"
            :key="index"
            :class="{ current: index === currentIndex }"
            @click="clickLeftItem(index)"
            ref="meneList"
          >
            <span>{{ item }}</span>
          </li>
        </ul>
      </div>
      <div class="shop_wrap">
        <ul ref="shopListP">
          <li class="shopList" v-for="item in rightD" :key="item.title">
            <div class="shop_title">
              <div class="title_t">
                <h4>{{ item.title }}</h4>
                <a href="###">{{ item.msg }}</a>
              </div>
              <ul>
                <li v-for="items in item.list" :key="items">
                  <img :src="items.imgUrl" alt />
                  <span>{{ items.title }}</span>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  name: "Chat",
  data() {
    return {
      scrollY: 0, //右侧列表滚动的y轴
      rightItemTop: [], //所有分类的头部位置
   };
  },
  watch: {
    // // searchGoods 是请求回来的数据 监听这个数据的变化 然后调用 由于写死的数据 因此在mounted之中调用 实际上this.$nextTick存放在watch之中
    // searchGoods() {
    //   this.$nextTick(() => {
    //     this.init();
    //   });
    // }
  },
  mounted() {
    //基本的滚动 就是在 mounted之中调用的
    this.$nextTick(() => {
      this.init();
      // 求出 所有版块的头部位置
      this.rightListTop();
    });
  },
  computed: {
    //左侧的动态选中
    currentIndex() {
      //获取数据
      const { scrollY, rightItemTop } = this;
      // 取出索引 滚动到哪里 然后左侧显示高亮
      return rightItemTop.findIndex((LiTop, index) => {
        this._leftScroll(index); //调用 左侧的联动
        return scrollY >= LiTop && scrollY < rightItemTop[index + 1];
      });
    }
  },
  methods: {
    init() {
      //左侧
      this.leftScroll = new BScroll(".menu_wrap", {
        scrollY: true,
        click: true
      });
      // 右侧
      this.rightScroll = new BScroll(".shop_wrap", {
        scrollY: true,
        click: true,
        probeType: 3 //滚动时候 监听
      });
      //监听右侧的滚动事件
      this.rightScroll.on("scrollEnd", pos => {
        //scroll  scrollEnd滚动结束的时候 监听
        this.scrollY = Math.abs(pos.y);
      });
    },
    // 获取右侧的 每一个模块的距离顶部的距离
    rightListTop() {
      const tempArr = [];
      let top = 0; //记录高度
      tempArr.push(top);
      // 遍历 对应的ul 中的li 取出每一个高度
      let allList = this.$refs.shopListP.querySelectorAll(".shopList");
      allList.forEach(item => {
        top += item.clientHeight;
        // console.log("top", top);
        tempArr.push(top);
      });
      this.rightItemTop = tempArr;
    },
    //点击切换
    clickLeftItem(index) {
      // console.log("index", this.rightItemTop[index]);
      this.scrollY = this.rightItemTop[index];
      this.rightScroll.scrollTo(0, -this.scrollY, 300);
    },
    //右侧滚动时候 实现左侧的联动
    _leftScroll(index) {
      let meneList = this.$refs.meneList;
      // console.log("左侧", index, meneList);
      let el = meneList[index];
      this.leftScroll.scrollToElement(el, 300, 0, -100);
    }
  },
  components: {}
};
</script>
<style lang="scss" scoped>
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.chat_wrap {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .shop {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;

    .menu_wrap {
      width: 75px;
      height: 100%;
      background: #ccc;
      & > ul > li {
        width: 75px;
        height: 60px;
        background: #fafafa;
        span {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
        }
      }
      .current {
        position: relative;
        color: red;
        &::before {
          position: absolute;
          left: 0;
          top: 15px;
          content: "";
          height: 30px;
          background: red;
          width: 4px;
        }
      }
    }
    .shop_wrap {
      width: 300px;
      height: 100%;
      // background: yellow;
      overflow-x: hidden;
      overflow-y: scroll;
      .shop_title {
        & > .title_t {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        & > ul {
          display: flex;
          flex-wrap: wrap;
        }
        & > ul > li {
          width: 50%;
          height: 130px;
          margin-bottom: 5px;
          background: pink;
          img {
            width: 100%;
            height: 85%;
          }
          span {
            display: block;
            height: 20px;
            line-height: 20px;
            color: #fff;
            text-align: center;
            background: #000;
          }
        }
      }
    }
  }
}
</style>
  • 数据
      leftD: [
        "女装",
        "鞋包",
        "T恤",
        "靴子",
        "男装",
        "珠宝",
        "首饰",
        "鞋子",
        "帽子",
        "水果",
        "家电",
        "蓝莓",
        "五金"
      ],
      rightD: [
        {
          title: "女装",
          msg: "查看更多",
          list: [
            {
              title: "女装",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "女装",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "女装",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "女装",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            }
          ]
        },
        {
          title: "鞋包",
          msg: "查看更多",
          list: [
            {
              title: "鞋包",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "鞋包",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "鞋包",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "鞋包",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            }
          ]
        },
        {
          title: "T恤",
          msg: "查看更多",
          list: [
            {
              title: "T恤",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "T恤",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "T恤",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "T恤",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            }
          ]
        },
        {
          title: "靴子",
          msg: "查看更多",
          list: [
            {
              title: "靴子",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "靴子",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "靴子",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "靴子",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            }
          ]
        },
        {
          title: "男装",
          msg: "查看更多",
          list: [
            {
              title: "男装",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "男装",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "男装",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "男装",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            }
          ]
        },
        {
          title: "珠宝",
          msg: "查看更多",
          list: [
            {
              title: "珠宝",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "珠宝",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "珠宝",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "珠宝",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            }
          ]
        },
        {
          title: "首饰",
          msg: "查看更多",
          list: [
            {
              title: "首饰",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "首饰",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "首饰",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "首饰",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            }
          ]
        },
        {
          title: "鞋子",
          msg: "查看更多",
          list: [
            {
              title: "鞋子",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "鞋子",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "鞋子",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "鞋子",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            }
          ]
        },
        {
          title: "帽子",
          msg: "查看更多",
          list: [
            {
              title: "帽子",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "帽子",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "帽子",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "帽子",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            }
          ]
        },
        {
          title: "水果",
          msg: "查看更多",
          list: [
            {
              title: "水果",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "水果",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "水果",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "水果",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            }
          ]
        },
        {
          title: "家电",
          msg: "查看更多",
          list: [
            {
              title: "家电",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "家电",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "家电",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "家电",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            }
          ]
        },
        {
          title: "蓝莓",
          msg: "查看更多",
          list: [
            {
              title: "蓝莓",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "蓝莓",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "蓝莓",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "蓝莓",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            }
          ]
        },
        {
          title: "五金",
          msg: "查看更多",
          list: [
            {
              title: "五金",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "五金",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "五金",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            },
            {
              title: "五金",
              imgUrl:
                "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
            }
          ]
        }
      ]
小小liang
关注
  • 8
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Vue实现左右菜单联动实现代码
10-18
主要介绍了Vue实现左右菜单联动实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue实现左右菜单联动实现（更新）
weixin_34416754的博客
08-11 4416
title: Vue实现左右菜单联动实现 date: 2018-08-11 16:31:34 tags: Vue 左右联动 top: 100 copyright: true 知乎 个人博客 Github 源码传送门：Rain120/vue-study 根据掘金评论需求，更新了数据接口并修复了一些问题 之前在外卖软件上看到这个左右联动的效果，觉得很有意思，所以就尝试使用Vue来实现，将这个联...
Vue左右联动
m0_59074147的博客
08-26 409
<template> <div class="linkage"> <div class="content-box"> <div class="nav" ref="nav"> <div @click="fnNav(index, $event)" v-for="(item, index) in btnList" :key="item.id" .
Vue 实现左右联动（超详细！！！！）
爱拼才会赢～的博客
03-31 5863
下面为大家分享一篇文章，vue实现左右联动，没有使用任何插件，这篇主要亮点在于右边滚动部分的标题，已用颜色标明，请看下图： 标题这篇文章的中心思想呢，就是通过一个变量来控制两个盒子的显示与隐藏（一个是“吸顶的红框”，另一个是“脱离吸顶的红框”） 1.先获取右边每一模块的高度 getBoxHeight() { let rightTitHeight = (this.rightTitHeight = this.$refs.rightTit.length ? this.$refs.rightT.
vue左右联动
qq_48435896的博客
04-06 424
***
vue中实现左右联动的效果
08-27
主要介绍了vue中实现左右联动的效果，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
vue使用better-scroll实现菜单列表左右联动
07-13
vue使用better-scroll实现菜单列表左右联动
vue左右侧联动滚动的实现代码
08-27
主要介绍了vue左右侧联动滚动的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue和better-scroll实现列表左右联动效果详解
10-17
主要介绍了vue和better-scroll实现列表左右联动效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
mpvue 左右联动
04-20
类似美团的左右联动。。拖动左侧title右侧内容区滚动到相应的位置，拖动右侧内容，左侧title滚动到相应位置
Vue制作左右联动网页
weixin_45828554的博客
06-07 399
效果展现 1. 2. 3. 正文 1.了解项目的基本结构！！！！很重要 2.了解views和components的区别！！！！很重要 3.了解这些文件的关系和加载过程！！！！很重要 代码： 链接：src.zip 提取码：icsd
css3实现菜单栏选中时的过渡效果
 我的博客
10-14 638
[color=blue][size=small]（如有错敬请指点，以下是我工作中遇到并且解决的问题）[/size][/color] [size=small]效果图： 未点击时：[/size] [img]http://dl2.iteye.com/upload/attachment/0120/6125/073abacd-60d7-3736-95b3-8f4cc682d4df.png[/img...
vue使用better-scroll左右列表双向联动
m0_46693606的博客
07-02 835
效果图 一、安装引入better-scroll npm install better-scroll --save import BScroll from 'better-scroll' 二、获取右侧滑动的y轴坐标 data中的数据 scroll: '', // 右侧滑动的y轴坐标（滑动过程中的实时变化） scrollY: 0, foodsScroll: '', // 所有右侧分类li的top组成的数组 tops: [], 在methods定义初始化滚动 // 初始化滚动
vue 左右滑动菜单_Vue实现左右菜单联动实现
weixin_39918961的博客
12-22 1285
根据掘金评论需求，更新了数据接口并修复了一些问题之前在外卖软件上看到这个左右联动的效果，觉得很有意思，所以就尝试使用Vue来实现，将这个联动抽离成为一个单独的组件，废话少说，先来一张效果图。这个组件分为两个部分，1、左菜单；2、右菜单。动态数据结构menus: [{name: '菜单1',data: [{name: '1.1'},{name: '1.2'},{name: '1.3'},{name:...
购物车左右联动
怪咖小白的博客
12-21 417
Main: public class MainActivity extends AppCompatActivity implements IView, View.OnClickListener { private RecyclerView recy_left; private RecyclerView recy_right; private FooterNumView pr...
vue3+Ts+pinia实现左右联动的楼层导航案例
最新发布
weixin_74773902的博客
07-13 573
以上就是这节的全部内容，欢迎各位大佬在下方评论区提问，如有不足，还望多多指教。
在vue中实现列表商品双向联动效果具体怎样实现
06-01
在 Vue 中实现列表商品双向联动效果，可以考虑如下步骤： 1. 定义商品列表组件和商品详情组件 首先需要定义左侧商品列表组件和右侧商品详情组件，可以分别使用 `<template>`、`<script>` 和 `<style>` 标签定义组件模板、脚本和样式。 2. 在商品列表组件中绑定 click 事件 在商品列表组件中，需要为每个商品元素绑定 click 事件，当用户点击某个商品时触发事件。事件处理函数中可以通过 `this.$emit` 方法发送事件通知，将当前商品信息传递给父组件。 3. 在商品详情组件中监听事件 在商品详情组件中，需要使用 `props` 属性定义父组件传递过来的商品信息，并监听父组件发送的事件。当事件发生时，可以根据事件参数更新商品详情区域的内容。 4. 在父组件中使用子组件 在父组件中，需要引入商品列表组件和商品详情组件，并在模板中使用它们。同时需要定义一个 `selectedItem` 数据，用于存储当前选中的商品信息。当商品列表组件发送事件通知时，更新 `selectedItem` 数据；当商品详情组件接收到事件时，根据事件参数更新 `selectedItem` 数据和右侧商品详情区域的内容。 下面是一个简单的示例代码，用于演示 Vue 中实现列表商品双向联动效果的方法： ```html <!-- 商品列表组件 --> <template> <div> <div v-for="item in items" :key="item.id" @click="handleClick(item)"> {{ item.name }} </div> </div> </template> <script> export default { props: { items: Array }, methods: { handleClick(item) { this.$emit('item-click', item) } } } </script> <!-- 商品详情组件 --> <template> <div> <div v-if="selectedItem"> <h2>{{ selectedItem.name }}</h2> <p>{{ selectedItem.description }}</p> </div> </div> </template> <script> export default { props: { selectedItem: Object }, mounted() { this.$parent.$on('item-click', this.handleItemClick) }, methods: { handleItemClick(item) { this.$emit('item-selected', item) } } } </script> <!-- 父组件 --> <template> <div> <div> <item-list :items="items" @item-click="handleItemClick"></item-list> <item-detail :selected-item="selectedItem" @item-selected="handleItemSelected"></item-detail> </div> </div> </template> <script> import ItemList from './ItemList.vue' import ItemDetail from './ItemDetail.vue' export default { components: { ItemList, ItemDetail }, data() { return { items: [ { id: 1, name: '商品1', description: '这是商品1的描述信息' }, { id: 2, name: '商品2', description: '这是商品2的描述信息' }, { id: 3, name: '商品3', description: '这是商品3的描述信息' } ], selectedItem: null } }, methods: { handleItemClick(item) { this.selectedItem = item }, handleItemSelected(item) { this.selectedItem = item } } } </script> ``` 在上面的示例代码中，我们定义了 `ItemList` 和 `ItemDetail` 两个组件，分别用于展示商品列表和商品详情。在父组件中，我们将这两个组件引入，并定义了 `items` 和 `selectedItem` 两个数据，用于存储所有商品和当前选中的商品。在 `ItemList` 组件中，我们为每个商品元素绑定了 click 事件，并通过 `this.$emit` 方法发送了一个 `item-click` 事件，将当前商品信息传递给父组件。在 `ItemDetail` 组件中，我们通过 `props` 属性定义了 `selectedItem` 数据，并在 `mounted` 钩子函数中监听了 `item-click` 事件，当事件发生时，通过 `this.$emit` 方法发送了一个 `item-selected` 事件，将当前商品信息传递给父组件。在父组件中，我们通过 `handleItemClick` 和 `handleItemSelected` 两个方法来更新 `selectedItem` 数据，并将其传递给 `ItemList` 和 `ItemDetail` 两个子组件，实现了列表商品双向联动效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值