Vue2_尚品汇前端项目day06超详细笔记_尚硅谷

0）面包屑

静态组件

1）动态开发面包屑中的分类名

编程式导航路由跳转【自己跳自己】

2）动态开发面包屑中的关键字

2.1当面包屑中的关键字消除以后，需要让兄弟组件Header组件中的关键字消除

设计组件通信：

props：父子

自定义时间：子父

vuex：万能

插槽：父子

pubsub.js：万能

$bus:全局事件总线

3）面包屑：处理关键字和分类名字步骤

methods:{
    //删除分类的名字
    removeCategoryName() {
      //把带给服务器的参数置空了，还需要向服务器发请求
      //带给服务器参数说明可有可无的：如果属性值为空的字符串还是会把相应的字符带给服务器
      //但是你把相应的字段变为undefined,当前这个字段不会带给服务器
      this.searchParams.categoryName = undefined;
      this.searchParams.category1Id = undefined;
      this.searchParams.category2Id = undefined;
      this.searchParams.category3Id = undefined;
      this.getData();
      //地址栏也需要改：进行路由跳转（现在的路由跳转只是跳转到自己这里）
      //严谨：本意是删除query，如果路径当中出现params不应该删除，路由跳转的时候应该带着
      if (this.$route.params) {
        this.$router.push({ name: "search", params: this.$route.params });
      }
    },
    //删除关键字
    removeKeyword() {
      //给服务器带的参数searchParams的keyword置空
      this.searchParams.keyword = undefined;
      //再次发请求
      this.getData();
      //通知兄弟组件Header清除关键字
      this.$bus.$emit("clear");
      //进行路由的跳转
      if (this.$route.query) {
        this.$router.push({ name: "search", query: this.$route.query });
      }
    },
}

4）面包屑：处理品牌信息

5）平台售卖属性操作

今天课程中小重点：排序事件

1：综合，2：价格 asc:升序，desc：降序

实例："1：desc"

1.1问题

order属性的属性值最多有多少种写法：

1：asc

1:desc

2:asc

2:desc

1.2考虑的问题:类名

谁应该有类名：通过order属性值当中是包含1（综合）| 包含2（价格）

1.3考虑的问题：谁应该有箭头

谁有类名，谁就有箭头

1.4箭头用什么制作？

阿里图标官网 https://www.iconfont.cn/

阿里图标

图标使用步骤

引入阿里图标

排序步骤

              

                

                  综合
                
                

                  价格
                
              

 //排序的操作
    changOrder(flag){
      //flag：用户每一次点击li标签的时候，用于区分是综合（1）还是价格（2）
      //先获取order的初始转态【咱们需要通过初始转态去判断接下来做什么】
      let originOrder = this.searchParams.order;
      //这里获取到的是最开始的转态： order: "1:desc"  
      let originFlag = this.searchParams.order.split(":")[0];
      let originSort = this.searchParams.order.split(":")[1];
      //新的排序方式
      let newOrder = '';
      //判断的是多次点击的是不是同一个按钮
      if(flag==originFlag)
      {
        newOrder = `${originFlag}:${originSort=="desc"?"asc":"desc"}`;
      }else{
        //点击的不是同一个按钮
        newOrder = `${flag}:${'desc'}`;
      }
      //需要给order重新复制
      this.searchParams.order = newOrder;
      //再次发请求
      this.getData();
    },
    //自定义事件的回调函数---获取当前第几页
    getPageNo(pageNo){
      //整理带给服务器的参数
      this.searchParams.pageNo = pageNo;
      //再次发请求
      this.getData();
    }