前言:本章算是上一章《vue父子组件之间的传值》知识点在项目中的一个实际运用。 Github:https://github.com/Ewall1106/mall(请选择分支chapter24)
mock
文件夹下新建goodsList.js
用于存储商品数据mock数据基本结构
axios获取数据
console数据打印
OK,请求成功了。
(1)data
中定义一个list
对象
(2)将res.data.goodslist
赋值给list
(3)我们将商品图片、文字描述、价格、折扣等等信息传给子组件
传值给子组件—props down
(4)子组件接受父组件传过来的值并进行props验证
props验证
到这里我们就在goodsItem
子组件中接受到了父组件传过来的一系列的值了,接下来就是在子组件中运用即可了。关于这一部分还可以进一步参考上一章的内容:vue父子组件的传值
关于props验证的解释大家可以看看官网的详细解释:Props验证
(5)使用子组件从父组件传过来的值
数据渲染
商品列表页
参考学习:
Props验证