一、shopCart组件
(1) goods 父组件和 子组件 shopCart 传参
deliveryPrice:{ // 单价 从json seller 对象数据中获取 type:Number, default:0 }, minPrice:{ // 最低起送价 从json seller 对象数据中获取 type:Number, default:20 }
其中 deliveryPrice 和 minPrice 的数据都是从 data.json数据 中 seller 对象下 获得。所以在goods 组件中还要 获取到 seller对象 的数据,否则会报错:
[Vue warn]: Error in render: "TypeError: Cannot read property 'deliveryPrice' of undefined"
解决方法:根组件 App.vue 中 router-view 组件获取seller 数据,传到 goods 组件中
1-1.app.vue (根组件 也是 goods 的父组件)
<keep-alive> <router-view :sell="sellerObj"></router-view> </keep-alive>
注意:sellerObj 是data 定义 的 对象里用来接收 data.json 数据,相当于 实参
1-2.goods.vue (相对于跟组件的子组件 且 shopCart 的父组件)
通过props 属性 进行组件之间的通信
props: { sell: Object // 相当于 形参 },
1-3.shopCart.vue ( goods 的子组件)
<shopCart :delivery-price="sell.deliveryPrice" :min-price="sell.minPrice"></shopCart>
(2) 选中商品 的 计算功能
1-1. 传入用户选中商品的集合
说明:从父组件会 传入一个用户选中商品的 数组,数组里会存放着 n 个对象,每个对象里存放着该 商品的 价格 和 数量。
props:{ // 通过父组件传过来的 ( 相当于形参 ) selefoodsArr:{ // 用户选中的商品存放在一个数组里 接收的是 data.json数据的 goods(数组) type:Array, // 当父组件传过来的 类型是对象或者 是数组时, default 就是一个函数 default (){ return [] // 返回数组 存放着选中 商品 对应的 goods下的 foods 数组(由 父组件 的 实参 决定的返回值) } }
1-2. 利用计算属性 选中商品数量的变化,商品总价,动态改变描述等功能
computed:{ totalPrice (){ //计算总价,超过起送额度后提示可付款 let total=0 // 定义一个返回值 this.selefoodsArr.forEach((rfoods) =>{ // 遍历 这个 goods 数组 取到 价格 和 数量 (当然在这里数据库没有count 这个属性,稍后 我们会利用 vue.set() 新建一个count 属性) total += rfoods.price * rfoods.count // 形参 rfoods 实参 是 foods }); return total; }, totalCount (){ // //计算选中的food数量,在购物车图标处显示,采用绝对定位,top:0;right:0;显示在购物车图标右上角 let count=0 this.selefoodsArr.forEach((rfoods) =>{ // 形参 rfoods 实参 是 foods count += rfoods.count }); return count; }, payDesc (){ //控制底部右边内容随food的变化而变化,payDesc()控制显示内容,enough 添加类调整显示样式 let diff = this.minPrice - this.totalPrice if (!this.totalPrice) { return `¥${this.minPrice}起送` } else if (diff > 0) { return `还差¥${diff}元` } else { return '去结算' } } }
内容版权声明:除非注明,否则皆为本站原创文章。