前言:本章算是上一章《vue父子组件之间的传值》知识点在项目中的一个实际运用。
Github:
https://github.com/Ewall1106/mall (请选择分支chapter24)
1、商品列表页基本数据结构及mock
- 在
文件夹下新建mock
用于存储商品数据goodsList.js
- 添加json基本数据结构
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuEjMhFGMiljY5I2YwU2Y0EWMhdjNlhzN4EDMxkTOxUTYfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.png)
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、小结
- 这就是我们商品列表页的基本的效果:
商品列表页
参考学习: