前端学习回顾 项目进度50%

1.商品分类面包屑

当分类名字存在时，显示面包屑；增加一个删除面包屑的点击事件，事件函数主要实现，清空分类名字和三级分类id,发送ajax请求，带参查询数据，判断路由params参数是否为空，不为空则携带params参数跳转路由（注意空对象作为if判断条件永远为真）

2.商品属性面包屑

属性是一个数组，不知存在一种属性，所以需要使用v-for遍历数组以此来显示面包屑。

对于prop="106:安卓手机:手机系统"获取安卓手机字段，使用prop.split(':')[1]。

难点，数组去重：判断this.searchParams.props.index(prop)==-1为真，说明这个属性在数组中不存在，可以添加面包屑

3.关键词面包屑

与分类面包屑类似，唯一不同，需要在删除面包屑的同时将搜索框内的关键词置空，使用总线全局事件，先在入口文件夹内配置总线全局事件，然后在search模块使用$emit('事件名')触发当前事件，使用this.$bus.$emit('clear')，在header组件中接受请求this.$bus.$on触发回调函数，清空搜索框内的关键字。

 4.点击品牌显示不同商品的功能实现

使用自定义事件(子传父）在子组件中添加@click=''trademarkHandler''事件，添加trademarkHandler方法，使用this.$emit('trademarkHandler'，trademark)，向父组件传递trademark数据，在父组件中添加自定义@trademarkInfo=''trademarkInfo''事件，添加trademarknfo方法，接受子组件传来的数据。然后获取trademark参数,合并参数，发送ajax请求。

5.点击不同属性显示不同商品功能实现。

部分同4，只不过这次需要传递两个参数，attr(属性)，value(属性值)，父组件接受到数据，获取attr.id（属性id）,attr.name(属性名字)，以及属性值，push到数组props参数中，合并参数，然后再次发送ajax请求。

6.排序

设置四个计算属性，分别判断升序降序还是综合和价格，通过绑定class属性动态显示效果