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