Vue项目中常见问题(33)detail路由组件展示商品售卖属性

最新推荐文章于 2023-05-13 16:27:38 发布
最新推荐文章于 2023-05-13 16:27:38 发布
阅读量577 收藏 1
点赞数
分类专栏： vue前台管理项目 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46368050/article/details/124900227
版权

目录

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

业务需求1:

1.父组件传数据给子组件​编辑

 2.我们在子组件ImageList.vue中通过props接收到父组件Detail传递过来的数据​编辑

 3.我们发现ImageList.vue中的结构是轮播图的结构

 4.遍历轮播图

 业务需求2:

1.简化数据

 2.Detail中获取数据

3.数据放到页面中

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

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

业务需求1:

展示放大镜下面的小图

所以父组件Detail也要把数据传给子组件小图列表,

1.父组件传数据给子组件

 2.我们在子组件ImageList.vue中通过props接收到父组件Detail传递过来的数据

最低0.47元/天 解锁文章
学无止境QAQ
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-details:正确支持HTML5 Vue.js中的标记，包括v-model属性（552字节）
05-01
Vue详细信息 正确支持Vue.js中的<details>标记，包括v-model属性。 开始使用 使用Node.js 安装套件 npm install vue-details 全局初始化 import Vue from 'vue' ; import VueDetails from 'vue-details' ; Vue . component ( 'v-details' , VueDetails ) ; 或本地，如下例所示。 使用CDN 加载脚本 < script src =" https://cdn.jsdelivr.net/npm/vue-details " > </ script > 或者 < script src =" https://unpkg.com/vue-details/dist/vue-details.min.js " > </ script > 注册组件 V
Day09-尚品汇-detail路由组件展示商品售卖属性-剪裁
qq_59110215的博客
10-19 136
卷
Vue项目实战-尚品汇--detail页面开发（七）
cxd_dxc的博客
01-11 700
内保包括58-68，分页器添加类名，以及滚动行为，产品详情页deatail数据的展示和放大镜操作。
vue模板1——list detail
spfLinux的博客
01-16 898
List.vue 列表页 {{tmp}} export default{ data:function(){ return {list:[100,200,300]} }, methods:{ jump(myIndex){ this.$router.push('/myDetail/'+myIndex);
vue项目学习：21-Detail头部的制作以及全局时间的解绑
simoon's的博客
05-11 714
头部需要实现下面的需求：&lt;div&gt; &lt;router-link tag="div" to="/" class="header-abs" v-if="showAbs"&gt; &lt;div class="iconfont header-abs-back"&gt;&lt;/div&gt; &lt
vue相同路由跳转强制刷新该路由组件操作
10-14
在Vue.js应用中，路由是页面之间导航的关键。然而，有时开发者可能会遇到一种情况，即在同一个路由下，需要在用户再次点击菜单时强制刷新组件，以确保组件的状态被重置。Vue Router，Vue.js的官方路由管理器，提供了...
在Vue中获取组件声明时的name属性方法
10-18
今天小编就为大家分享一篇在Vue中获取组件声明时的name属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 解决路由只变化参数页面组件不更新问题
10-16
今天小编就为大家分享一篇vue 解决路由只变化参数页面组件不更新问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中的组件及路由使用实例代码详解
10-16
在Vue中，组件可以看作是一个拥有独立功能的微型视图，它们可以互相组合，形成复杂的用户界面。 1. **组件的声明及使用** 在Vue中，组件可以通过全局或局部方式进行声明。全局组件可以在整个应用中被任何地方使用...
解决vue动态路由异步加载import组件,加载不到module的问题
10-15
主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue dialog及detail封装
qq_21747731的专栏
07-05 711
1.父组件 <!-- 弹窗, 新增 / 修改 --> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> // 引入 import mixinViewModule from '@/mixins/view-module' import AddOrUpdate from './ad
vue2项目（五）---Detail
m0_61368323的博客
05-11 96
先给放大镜绑定全局事件总线，再在轮播图中触发事件，然后把图片的索引值传给放大镜。注意：getters里面的写法，请求数据是异步操作，所以一开始数据是空对象，所以读取空对象上的属性会报错，可以先加一个或空，来解决服务器报错问题。由于图片在一个数组里面，原先是一个空数组，所以请求会报错，我们添加一个或 [] 可以解决问题。1）由于商品详情页，需要带商品的Id,所以在配置路由的时候，需要使用params占位。当点击轮播图的图片时，放大镜进行展示轮播图里的图片。图片的数据在父组件中，需要使用父向子传值。
vue3项目（六）---detail
最新发布
m0_61368323的博客
05-13 1153
1.可选链（?.）：用于无法判断是否存在改参数时使用，如果没有会立即返回undefined，就不会当读取为空时报错。2.热榜区域实现中，使用了props传参。通过共用一个组件，传递不同的参数实现。3.放大镜效果：使用useMouseInelement来获取鼠标的位置。
vue电商项目(四)——开发Detail页面
a_bowl_rice的博客
12-26 338
我们先将准备好的页面复制到pages中。由于此组件还没有配置路由，我们应该配置路由。
vue 列表页跳转详情页获取id的方法以及详情页通过id获取数据
qq_43579525的博客
05-05 6905
vue 列表页跳转详情页获取id的方法以及详情页通过id获取数据 2018年12月17日 20:19:00 荔枝吖 阅读数：1644 1.先在router.js中配置路由 { path: '/movieDetail/:movieId', name: 'movieDetail', component:movieDetail } 2.获取详情页的id,并...
【第五篇】Vue中的样式处理
热门推荐
波波烤鸭的博客
07-10 1万+
  本文我们来介绍下在Vue中针对样式处理这块的支持 Vue样式处理 一、class  我们首先来看下class属性的使用。 1.基本的class使用   我们先来看下非vue情况的class的使用，如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &...
【Vue2项目(尚品汇前台)】(四）Detail详情模块搭建
matmacchiato的博客
01-20 294
利用监听，监听图片数据过来了，就可以开始执行后面的动作，但是数据过来了还不能保证遍历完成了，所以还要用到$nextTick。发生这个现象的原因是，父组件的值还没传到子组件的时候，子组件已经渲染完成了，数据未请求到时获取其属性报错。放大镜和轮播图属于兄弟组件，所以用$bus全局总线传递信息，告知放大镜的图片我现在轮播图播的是哪一张图。元素里有一个isChecked属性，当它为1时是亮的，为0时是不亮的，通过绑定这个属性就可以切换高亮。因为是父组件捞的数据，放大镜是子组件，所以要父给子传值，用的是props。
vue购物车效果
as_long_的博客
10-07 398
一、介绍 vue购物车效果实现了全选
vue Router的学习（一）
qq_53446980的博客
10-18 177
vue Router的学习（一） 路由 route路由 就是一组key-value的对应关系 router路由器 多个路由需要经过路由器的管理 vue-router插件库 专门用来实现SPA (单页面程序)应用 对SPA 应用的理解 ​ 单页面web应用 整个应用只有一个完整的页面 点击页面中的导航链接不会刷新页面，只会做页面的局部更新 数据需要通过ajax请求获取 路由的理解 ​ 一个路由就是一组映射关系 ​ key为路径，value为component用于展示页面内容 ​ 工作过程：当

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值