Vue shopCart 组件开发详解

一、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 '去结算'
    }
 }  
}

      

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/216.html