Vue3仿美团项目--第三天

3 第三天

主要任务：步进器和按钮，店铺底部导航栏，购物车部分开发

3.1 步进器和按钮

分析：当点击加号按钮的时候按钮消失，显示步进器，按钮消失可以通过改变从父组件接收的showAdd为flase或者是数组本身的add为true，showAdd是控制是从店铺来的还是从购物车来的，改变的话会是其他的也发生变化，所以通过改变add。

实现：数据是在商品列表组件里面的，所以在商品列表组件中定义这个方法，然后在商品信息组件中直接接收父组件传过来的方法，在图标上绑定。当点击子组件这个图标的时候触父组件传递的这个事件，然后从子组件把当前点击的商品的索引传递给父组件，然后在父组件中循环遍历数组，当id与传递的索引匹配上的时候，就把add改为flase，并且把num改为1（步进器数值默认为1)。

然后再定义步进器的点击事件，事件名称是根据官网来的。这样的话，当步进器的值发生改变的时候就出发事件，自动给父组件传递两个信息，父组件接收数据之后遍历数组，自动匹配与传过来的id值相等的商品，然后改变商品的num值。

事件名	说明	回调参数
change	当绑定值变化时触发的事件	value: string, detail: { name: st