尚硅谷vue前端项目心得3

Day 3,4 (43-70)

3.1 监听路由变化再次发请求获取数据

监听路由变化$route

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bYOTqFFy-1642475400001)(C:\Users\22982\AppData\Roaming\Typora\typora-user-images\image-20220114131331706.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bPMHuLt6-1642475400002)(C:\Users\22982\AppData\Roaming\Typora\typora-user-images\image-20220114131353490.png)]

watch:{
   
   
    // 监听路由信息是否发生变化,发生则再发请求
    $route(){
   
   
      Object.assign(this.searchParams,this.$route.query,this.$route.params)
      // 再发起ajax请求
      this.getData()
      // 置空1.2.3级id
      this.searchParams.category1Id=''
      this.searchParams.category2Id=''
      this.searchParams.category3Id=''
    }
  }

Q:为什么分类名字和keyword不用改?

A:每次路由变化时,都会赋予新的数据

3.3 商品柜-面包屑处理分类的操作

removeCategoryName(){
   
   
      // 把服务器参数置空并再发一次请求
      // 带给服务器参数可有可无,若属性值为空的字符串还是会把相应字段带给服务器
      // 但将相应字段值改为undefined,便不会带给服务器
      this.searchParams.categoryName=undefined
      // 置空1.2.3级id
      this.searchParams.category1Id=undefined
      this.searchParams.category2Id=undefined
      this.searchParams.category3Id=undefined
      this.searchParams.category3id=undefined
      this.getData()
      // 地址栏也需要置空:路由跳转
      if(this.$route.params){
   
   
        // 本意删除query,若路径当中出现params不应该删除,路由跳转时应该带着
        this.$router.push({
   
   name:"search",params:this.$route.params})
      }
    }
编程式导航路由跳转【自己跳自己】

3.4 面包屑处理关键字

当面包屑中关键字清除后,需要兄弟组件Header组件中的关键字清除
想到组建通信
  1. props:父子
  2. 自定义事件:子父
  3. vuex:万能
  4. 插槽:父子
  5. pubsub-js:完成
  6. $bus:全局事件总线

3.5 面包屑处理品牌信息

Q:在哪个组件发请求,为什么?

A:父组件,因为父组件中searchParams参数是带给服务器参数,子组件把点击的品牌信息给父组件传过去(子传父)-----------自定义事件

<!--selector-->子组件index.vue
        <SearchSelector @trademarkInfo="trademarkInfo"/>

父组件js

// 自定义事件回调
    trademarkInfo(trademark){
   
   
      // console.log(1111,trademark);
      // 整理品牌字段
      this.searchParams.trademark=`${
     
     trademark.tmId}:${
     
     trademark.tmName}`
      // 再次发请求
      this.getData()
    },
    // 删除品牌信息
    removeTrademark(){
   
   
      // 将品牌置空
      this.searchParams.trademark=undefined
      // 再次发请求
      this.getData()
    }

子组件js

// 品牌处理函数
    trademarkHandler(trademark) {
   
   
      // 点击品牌(苹果),还需整理参数,向服务器发请求获取相应数据进行展示
      this.$emit("trademarkInfo", trademark);
    },

3.6 平台售卖属性操作

平台售卖属性值的展示面包屑

<li class="with-x" v-for="(attrValue,index) in searchParams.props" :key="index">{
   
   {
   
   attrValue.split(':')[1]}}<i @click="removeAttr(index)">×</i></li>

子组件SearchSelector

<!-- 平台售卖的属性的属性值:粉色,蓝色... -->
          <li v-for="(attrValue, index) in attrs.attrValueList" :key="index" @click="attrInfo(attrs,attrValue)">
            <a>{
  
  { attrValue }}</a>
// 平台售卖属性值的点击事件
    attrInfo(attrs,attrValue){
   
   
      // ["属性ID:属性值:属性名"]
      this.$emit("attrInfo",attrs,attrValue)
    }

收集平台属性的回调函数

attrInfo(attr,attrValue){
   
   
      // 参数格式整理好
      let props=`${
     
     attr.attrId}:${
     
     attrValue}:${
     
     attr.attrName}`
      // 数组去重
      if(this.searchParams.props.indexOf(props)==-1){
   
   
        this.searchParams.props.push(props)
      }
      // 再次发请求
      this.getData()
    },

删除售卖属性</

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值