专栏首页vue学习24、商品列表页之数据渲染和传值

24、商品列表页之数据渲染和传值

前言:本章算是上一章《vue父子组件之间的传值》知识点在项目中的一个实际运用。 Github:https://github.com/Ewall1106/mall(请选择分支chapter24)

1、商品列表页基本数据结构及mock

  • mock文件夹下新建goodsList.js用于存储商品数据
  • 添加json基本数据结构

mock数据基本结构

2、axios请求mock数据

  • import引入axios;
  • axios请求本地mock数据;
  • 打印并查看。

axios获取数据

console数据打印

OK,请求成功了。

3、渲染到页面上

(1)data中定义一个list对象 (2)将res.data.goodslist赋值给list (3)我们将商品图片、文字描述、价格、折扣等等信息传给子组件

传值给子组件—props down

(4)子组件接受父组件传过来的值并进行props验证

props验证

到这里我们就在goodsItem子组件中接受到了父组件传过来的一系列的值了,接下来就是在子组件中运用即可了。关于这一部分还可以进一步参考上一章的内容:vue父子组件的传值

关于props验证的解释大家可以看看官网的详细解释:Props验证

(5)使用子组件从父组件传过来的值

数据渲染

4、小结

  • 这就是我们商品列表页的基本的效果:

商品列表页

  • 这章其实就是上章vue父子组件的传值的一个实际运用,其它的axios的引入和运用算是一种对前面内容的复习而已;
  • 至于筛选工具栏的筛选功能我们等把node、MongoDB安排起来了,在具体实现这方面功能。

参考学习: Props验证 vue父子组件的传值

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 23、一看就懂父子组件之间的传值

    通过"props down , events up"我们就简单的实现了父子组件之间的双向传值,这是很基本的知识点,其它还有$invoke等等方法,大家可以去官网...

    Ewall
  • 11、组件入门及写个首页头部组件

    前言:项目准备工作说了很久,不知道大家学会了没有?今天开始我们开始正式搭建页面,先从首页开始,在搭建页面的过程中,我也会将vue的知识点在其中穿插讲解,但是你最...

    Ewall
  • 26、有赞Vant组件库的引入及轮播图片预览的实现①

    这里引入vant有点坑啊,,,因为官网不推荐一次性导入所有组件,所以按照推荐的使用按需引入组件方法引入组件。

    Ewall
  • ZooTeam 拍了拍你,来看看如何设计动态化表单

    对于 ToB 业务而言,随着业务的不断壮大,接入的客户逐渐增加,相同页面的差异化的需求越来越多,尤其是在表单层面,小到多一个字段少一个字段这种简单的需求,大到整...

    政采云前端团队
  • Vue-cli父子组件之间传参

    小小咸鱼YwY
  • 厌倦了写活动页?快来撸一个页面生成器吧!

    如果你经常接触一些公司的活动页,可能会经常头疼以下问题:这些项目周期短,需求频繁,迭代快,技术要求不高,成长空间也小。但是我们还是马不停蹄的赶着产品提来的一个个...

    coder_koala
  • 基于 HTML5 Canvas 的属性值点击出现多选项的制作

    HT_hightopo
  • 从工程化角度讨论如何快速构建可靠React组件

    前言 React 的开发也已经有2年时间了,先从QQ的家校群,转成做互动直播,主要是花样直播这一块。切换过来的时候,业务非常繁忙,接手过来的业务比较凌乱,也没有...

    李成熙heyli
  • Vue 组件(一):组件的基本使用

    组件实际上是可以复用的 Vue 实例,它们与 new Vue 接收相同的选项,例如 data、computed、methods 以及生命周期钩子等。 何谓复用?...

    Chor
  • 微信小程序 自定义组件样式

    组件对应 wxss 文件的样式,只对组件wxml内的节点生效。编写组件样式时,需要注意以下几点:

    天天_哥

扫码关注云+社区

领取腾讯云代金券