1.导入,注册组件
2.基于axios请求列表数据
- 安装并导入axios。method方法中,定义函数,请求列表数据。在created生命周期函数中。调用上一步封装的函数。
- 转存数据到data中
3.将数据循环渲染到组件中
4.父组件App.vue向子组件Goods传递上一步请求来的值,v-for依次传递。用到的主要是父组件向子组件传值方法:自定义属性。
- 注意:由于传递的是自定义属性,具有只读的属性,所以不能用v-model绑定
- 关于属性传递问题,还有一种传递方法是父组件直接把后台列表的对象传进子组件,子组件中选择对象的属性。这种方法的缺点就是复用性差,不推荐使用。应在父组件中写好传入的属性,方便不同列表对象的不同名字的传入
- 复选框checkbox自带事件change,监听复选框变化。可以给change绑定自定义事件。@change = statechange
- 不能只传递复选框的checked值,还需传递对应item的id,为了使系统能对应哪个item的state。传递一个对象{id : number,value : boolean}
5.Goods里的子组件count和App组件为兄弟组建,用EventBus传递参数
6.footer组件里面控制全选框的isFull布尔值、总金额、总数量,均为父组件App向子组件传值。footer里自定义属性接受,App里设置计算属性,计算返回子组件的值。
而footer里的全选框又影响App组件的框,即子传父。自定义事件