我这里的话,是因为用的假数据,在点击商品选中或者不选中时,需要改变商品里的选中属性,所以用到了子组件往父组件传值,也包括传递选中的商品数量
子组件往父组件传值的话,是通过在调用this.triggerEvent()来实现的
/* 在父组件中定义方法:bind:handleselect或者也可以直接写成bindhandleselect*/ <cart-item commodity="{{item}}" bind:handleselect="handleSelect" />
在子组件中调用
this.triggerEvent('handleselect', { commodity, selectedNum})
这个this.triggerEvent('handleselect', { commodity, selectedNum })方法中,handleselect的名称要与父组件中引用子组件时绑定的方法名称一样,后面的对象就是传递的值,也可以直接是以直接量的形式传递,然后再父组件中通过e.detail来获取对应的值
handleSelect(e) { console.log(e.detail) console.log(e.detail.commodity) console.log(e.detail.selectedNum) }
5.calc的注意事项
我以前也遇到过,然后现在再用的时候,一时间把这点给忘了,在看到编译器样式的时候,才猛然想起
.user-content{ padding: 10px 0 10px 50px; width: calc(100% - 50px); /* 计算宽度,'+'或'-'符号前后有空格 */ height: 18px; }
css中使用calc可以进行简单的运算:
单位可以是百分比,px,rem,em等单位
使用"+","-","*","https://www.jb51.net/"运算符(使用"+"或者"-"符号时,符号前后必须加上空格)
在Firefox浏览器上使用要加上-moz前缀
chrome浏览器上使用要加上-webkit前缀
(使用"+"或者"-"符号时,符号前后必须加上空格)
6.部分想法
其实在样式上还是挺快就完成了,就是在计算商品价格的时候,想了挺久
在计算价格时,当时就有点蒙圈,总是想着要怎么判断他是增加数量还是减少数量,然后就陷入死循环的之中。
其实不用想她是增加还是减少数量,因为你都是传的是商品的数量,而且在计算时,也是判断了商品是否选中,所以,直接点,计算价格乘以数量就可以了
然后选中的商品数量的统计就和计算价格的思路是一样的了
总结