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

96
Ewall_ Excellent
2018.08.30 11:47 字数 441

前言:本章算是上一章《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父子组件的传值

手把手教你用vue+node+mongodb搭建一个小商场
2.4万字 · 5.2万阅读 · 544人关注
GitHub:https://github.com/Ewall1106/mall
Gupao