[JavaScript知识库]vue实战-面包屑的处理

vue实战-面包屑的处理

1.面包屑处理分类操作

在Search路由模块下
通过v-if来确定面包屑的存在，设置点击事件处理删除面包屑后的情况

<ul class="fl sui-tag">
     <li class="with-x" v-if="searchParams.categoryName">{{searchParams.categoryName}}<i @click="removeCategoryName">×</i></li>
</ul>

点击事件方法

   removeCategoryName(){
        //点击x的时候将searchParams中的categoryName的值清空,
        //由于name清空了，可是它的id还在，所以也需要将它的id给清空
        //为了给仓库减负，就是不输出空的暂时用不上的属性值，不将这些值变为空字符而是undefined，
        //这样就不会返回数据到仓库中了。
        this.searchParams.categoryName = undefined
        this.searchParams.category1Id = undefined
        this.searchParams.category2Id = undefined
        this.searchParams.category3Id = undefined
        //并且重新派发告诉服务器数据变化
        this.getData()
        //更新数据后，路由跳转也需要更改
        //这里指右边三级联动的query需要删除，而如果存在parama参数需要保留
        if(this.$route.params){
          this.$router.push({name:'search',params:this.$route.params})
        }

      }

2.面包屑中的关键字处理

组件通信：
1.props：父子
2.自定义事件：子父
3.vuex：仓库数据，万能
4.插槽：父子
5.pubsub-js：万能
6.$bus:全局事件总线

同样在Search路由模块下
通过v-if来确定面包屑的存在，设置点击事件处理删除面包屑后的情况

 <!-- 搜索关键字面包屑 -->
<li class="with-x" v-if="searchParams.keyword">{{searchParams.keyword}}<i @click="removeKeyword">×</i></li>

点击事件的方法

removeKeyword(){
        //与处理分类操作相同
        this.searchParams.keyword = undefined
        this.getData()
        //但是这样是Search组件中的keyword为undefined了，可是Header组件中的keyword还是存在
        //所以需要将Header中的keyword的值也清空。
        //Search与Header组件之间是兄弟组件,使用全局事件总线$bus来传递。
        //去$bus中获取触发Header组件绑定的事件
        this.$bus.$emit('clear')
        //同样的，由于点击删除面包屑路由跳转要恢复，要考虑到三级分类的query参数存在时
        //应该保留
        if(this.$route.query){
          this.$router.push({name:'search',query:this.$route.query})
        }
      }

Header组件模块中的绑定事件

  mounted(){
      this.$bus.$on('clear',()=>{
        this.keyword = ''
      })
    }

注册全局事件总线

成功的实现了面包屑中关键字的处理，Header组件与Search组件中的keyword都因为面包屑的删除而清空。

3.平台售卖属性的操作

在Search组件下添加售卖属性的面包屑

<!-- 销售属性的面包屑 -->
<li class="with-x" v-for="(attv,index) in (searchParams.props)" :key="index">{{attv.split(':')[1]}}<i @click="removeprops(index)">×</i></li>

通过自定义事件（子传父）传递数据

父组件下绑定自定义事件

处理从子组件传递过来的数据

   attrInfo(attr,attv){
        let props = `${attr.attrId}:${attv}:${attr.attrName}`
        if(this.searchParams.props.indexOf(props)){
          this.searchParams.props.push(props)
        }
        this.getData()
      },

子组件触发事件并传递数据

 attrInfo(attr,attv){
        this.$emit('attrInfo', attr,attv)
      }

删除面包屑操作

绑定点击事件方法，因为props是数组，需要splice方法来删除元素。

removeprops(index){
        this.searchParams.props.splice(index,1)
        this.getData()
      }