尚硅谷vue前端项目心得3

im_joy

已于 2022-01-20 20:10:46 修改

阅读量738

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签：前端 vue.js javascript

于 2022-01-18 11:11:01 首次发布

本文链接：https://blog.youkuaiyun.com/im_joy/article/details/122555868

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组件中的关键字清除

想到组建通信

props：父子
自定义事件：子父
vuex：万能
插槽：父子
pubsub-js：完成
$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()
    },