购物车案例【版本为vue3】

前言：
首先我们要明白整个购物车的组成。它是由一个主页面加两个组件组合成的。本章主要运用父子之间的通讯： 父传子 子传父

---

首先新建一个vue3项目，这里有俩种创建方式：

1. vue-cli ：

● 输入安装指令 npm init vue@latest 等待几秒之后 输入你要创建的文件名进入下一步
cd 文件名
安装项目依赖：npm install
打开文件 npm run dev
如果需要发布生产环境 npm run build

2. vite：
   使用 vite 体验更快速

$ npm init vite-app
$ cd
$ npm install
$ npm run dev

#yarn

$ yarn create vite-app
$ cd
$ yarn
$ yarn dev

打开app.vue 也就是 主页面：

<script>
import Product from '@/components/Product.vue'
import Collecrs from '@/components/Collecrs.vue'
export default {name: 'app',// 注册一下俩个组件components: { Product, Collecrs },data: () => ({// 购物车本地数据shopCar: [{id: 89,title: '四川爱媛38号果冻橙 当季时令应季彩箱装甜桔橘子新鲜水果专区 净重2斤小果尝鲜装(力荐大果，口感更好更实惠)',subtitle: '由初逐旗舰店从 四川眉山市 发货, 并提供售后服务. 现在至明日17:00前完成下单，预计11月15日19:30前发货',image: 'https://img12.360buyimg.com/n1/jfs/t1/39198/22/19565/188868/634a3bc4Ea15f2eee/2bb232b36cdd285c.jpg',price: 10,count: 1,selected: false},{id: 102,title: '【现货速发】新鲜四季青柠檬 无籽香水柠檬当季生鲜小青柠檬奶茶店水果 有籽青柠檬1斤装试吃【50-80克】',subtitle: '由朵艾美水果旗舰店发货, 并提供售后服务. 现在至明日16:00前完成下单，预计11月16日23:30前发货',image: 'https://img12.360buyimg.com/n1/jfs/t1/191077/5/6346/108268/60beea0dEc3a6d2ad/15db7dd619a0bc4f.jpg',price: 9,count: 3,selected: false},{id: 108,title: '新疆阿克苏冰糖心苹果 新鲜时令水果 阿克苏苹果红富士 10斤礼盒装 单果75-85mm 净重9斤多',subtitle: '由阿克苏苹果旗舰店发货, 并提供售后服务. 现在至明日16:00前完成下单，预计11月16日20:30前发货',image: 'https://img13.360buyimg.com/n1/jfs/t1/64647/33/22918/106322/6360afb1E9bab1003/a82bda0aeae6e953.png',price: 80,count: 2,selected: false},]}),methods: {// 单选danxuan(checked, id) {// 循环购物车中的每个产品this.shopCar.some(product => {// 判断更改的是哪一个产品的 checked 状态if (id === product.id) {product.selected = checked // 改变购物车中指定产品的选中的值return true // 结束循环}})},// 修改购物车数量changeProductCount(count, id) {this.shopCar.some(product => {// 判断更改的是哪一个产品的 checked 状态// console.log(id+'是id')// console.log(product.id+'是product.id')if (id === product.id) {product.count += count // 改变购物车中指定产品的选中的值return true // 结束循环}})},// 全选quanxuans(checked) {// 改变购物车所有产品的选中状态this.shopCar.forEach(product => product.selected = checked)}},computed: {// 是否全选购物车产品 every所有都变他才变isFullSelecteProduct() {return this.shopCar.every(product => product.selected)},// 总金额total() {return this.shopCar.filter(item => item.selected) // 过滤掉被选中得产品.reduce((money, item) => (money += item.price * item.count), 0) // 累加器},// 购买总数量countSum() {return this.shopCar.filter(item => item.selected) // 过滤掉被选中得产品.reduce((count, item) => (count += item.count), 0) // 累加器}}
}
</script><template><div class="app"><!-- 产品展示,把数据 遍历一下 拿到每一列的数据 再把数据 父传子  Product接收一下然后渲染--><Product v-for="product in shopCar" :key="product.id" :id="product.id" :picture="product.image":title="product.title" :subtitle="product.subtitle" :price="product.price" :count="product.count":is-checked="product.selected" @change-product-checked="danxuan"@change-product-count="changeProductCount"></Product><!-- 控制器 --><Collecrs :is-all-checked="isFullSelecteProduct" :all-money="total" :all-count="countSum"@change-all-checked-state="quanxuans"></Collecrs></div>
</template>
<style>
* {margin: 0;padding: 0;/* text-align: center; */
}
</style>

创建组件 Product.vue 它是购物车显示的内容：

<script>
export default {//接收一下父组件传来的数据props: {id: { type: Number, required: true }, // 产品编号isChecked: Boolean, // 是否被选中picture: { type: String, required: true }, // 图像title: { type: String, required: true }, // 标题subtitle: { type: String, required: true }, // 副标题price: { type: Number, defalut: 0 }, // 单价count: { type: Number, defalut: 0 } // 数量   },// 声明 自定义事件emits: ['changeProductChecked',//改变复选框'changeProductCount' //改变产品数量],methods:{changeCheckedState(e){let newCheckedState = e.target.checked // 复选框最新的状态this.$emit('changeProductChecked', newCheckedState, this.$props.id) // 触发自定义的事件，并传值给父组件}}
}
</script>
<template><div class="box">//正常渲染数据之后，再进行其他操作<!-- 选项图  用  :checked="isChecked" 的方法来用接收过来的数据进行渲染--><input type="checkbox" class="p_checkbox" :checked="isChecked" @change="changeCheckedState"><!-- 产品图 --><img class="p-image" :src="picture"><!-- 产品内容 --><div class="p_content"><!-- 标题 --><h3 class="p_title" v-text="title"></h3><!-- 副标题 --><span class="p_subtitle" v-text="subtitle"></span><!-- 价格 --><h2 class="p_price">${{ price }}</h2><!-- 数量区域 --><div class="p_count_area">//<button :disabled="count<=1" @click="$emit('changeProductCount', -1, id)">-</button><span v-text="count"></span><button @click="$emit('changeProductCount', 1, id)">+</button></div></div></div>
</template><style>
.box {box-shadow: 0 0 8px gray;padding: 20px;margin: 15px auto;display: flex;align-items: center;
}.p_checkbox {width: 25px;height: 25px;
}.p_image {width: 120px;height: 120px;margin: 0 20px;
}.p_content {align-self: start;position: relative;width: 100%;
}.p_title {margin-bottom: 8px;
}.p_subtitle {font-size: 14px;color: gray;
}.p_price {margin-top: 20px;color: rgb(201, 67, 67);
}.p_count_area {position: absolute;bottom: 0;right: 0;
}.p_count_area button {width: 25px;height: 25px;
}.p_count_area span {margin: 0 10px;
}
</style>

最后创建一下 收尾功能的组 Collecrs.vue：

<script>
export default {// 自定义属性props: {isAllChecked: Boolean, // 是否全选allMoney: { type: Number, default: 0 }, // 总金额allCount: { type: Number, default: 0 } // 总个数},// 自定义事件emits: ['changeAllCheckedState' // 改变全选状态的事件]
}
</script><template><div class="container"><!-- 全选 --><label><input type="checkbox" :checked="isAllChecked"@change="$emit('changeAllCheckedState', $event.target.checked)">全选</label><!-- 总金额 --><span>合计金额：<strong>￥ {{ allMoney }}</strong></span><span>总数：{{ allCount }}</span><!-- 结算按钮 --><button>结算【 {{ allCount }} 】</button></div>
</template><style>
.container {padding: 20px;margin: auto 15px;display: flex;justify-content: space-between;align-items: center;
}.container input {width: 25px;height: 25px;
}.container label {display: flex;align-items: center;width: 70px;justify-content: space-between;
}.container strong {color: red;
}.container button {border: none;padding: 15px 25px;background-color: rgb(50, 140, 192);color: white;border-radius: 8px;box-shadow: 0 0 5px gray;
}
</style>