本文共 1075 字，大约阅读时间需要 3 分钟。

页面底部购物车的样式分为3种，如下图所示

图1

图2

图3

图1中的4元配送费和20元起送是后台返回的数据并且底部字体样色是灰色 的；图2是当有食品家务购物车的时候，购物车的字体变色并且logo右上方会有数字提示所加商品数，右边的“20元起送”变成“还差多少元起送”；图3当所加商品的总额超过还差20元的时候，最右边的“还差多少元起送”变成“去结算”并且字体样色和背景色变色

下面就看看如何实现购物车shopCart.vue这个组件

1、首先先将图1写出来

1）需要从goods.vue（父组件）中传递数据deliveryPrice和minPrice以及selectFoods，而这些数据又在seller里面，所以需要从App.vue（父组件）中传递数据seller，如下图所示

在App.vue中的<router-view>绑定变量seller

在goods.vue中通过props属性声明seller变量，并引入使用Shop-cart组件

在<shop-cart>组件里面绑定变量delivery-price和min-price，如上图所示

在shopCart.vue里面声明变量delivery-price和min-price，如下图所示

2、下面是shopCart.vue文件中的<template>中的内容

3、shopCart.vue文件中的<script>内容

4、shopCart.vue文件中的<style>内容