【Vue项目】面包屑处理品牌信息

需求

点击品牌图片，实现：品牌相关的数据展示和面包屑出现该字段，并可以删除该字段再渲染

思路

面包屑放在了Search这个组件里，品牌放在了SearchSelector组件中，SearchSelector是Search的子组件。

现在考虑点击SearchSelector组件里的某个品牌（以“华为”举例），将“华为”这个品牌信息传递给父组件Search组件的面包屑中。那么要如何实现？

1.子传父 考虑用自定义事件 给子组件SearchSelector绑定tradeMarkHandler事件

SearchSelector组件相关代码:

<template>
<ul class="logo-list">
    <li v-for="(trademark,index) in trademarkList" 
    :key="trademark.tmId" 
    @click="tradeMarkHandler(trademark)">
    {{trademark.tmName}}
    </li>
</ul>
</template>
<script>
import {mapGetters} from "vuex";
  export default {
    name: 'SearchSelector',
    computed:{
      ...mapGetters(["trademarkList","attrsList"]),
    },
    props:[''],
    methods: {
      // 品牌处理事件函数
      tradeMarkHandler(trademark){
        this.$emit("trademarkInfo",trademark)
      }
    },
  }
</script>

在Search组件中 相关代码：

<template>
    <ul>
        <li class="with-x" v-if="searchParams.trademark">
              {{searchParams.trademark.split(':')[1]}}
              <i @click="removeTrademark">×</i>
        </li>
    </ul>
</template>
<script>
import SearchSelector from "./SearchSelector/SearchSelector";
import { mapGetters } from "vuex";
export default {
  name: "Search",
  components: {earchSelector},
  methods: {
    getData() {
      //问服务器发请求获取search模块数据（根据参数不同返回不同的数据进行展示)
      //把这次请求封装为一个函数:当你需要在调用的时候调用即可
      this.$store.dispatch("getSearchList", this.searchParams);
    },
    
    trademarkInfo(trademark){
      // 点击了品牌（苹果），还是需要整理参数，向服务器发请求获取相应的数据进行展示
      // 问题:在那个组件中发请求,父组件?
      // 为什么? 因为父组件中searchPanams参数是带给服务器参数，子组件组件把你点击的品牌的信息，需要给父组件传递过去---自定义事件
      //console.log("我是父组件",trademark);
      //1:整理品牌字段的参数“ID:品牌名称"
      this.searchParams.trademark = `${trademark.tmId}:${trademark.tmName}`;
      //再次发请求获取search模块列表数据进行展示
      this.getData();
    },
    //删除品牌的信息
    removeTrademark(){
      // 将品牌信息置空
      this.searchParams.trademark = undefined;
      // 再次发请求
      this.getData();
    }
  },
  
};
</script>

console.log("我是父组件",trademark);//确定父组件可以收到子组件传递过来的trademark字段，是一个对象，里面有tmId和tmName等我们需要的字段

2.按照接口文档，将品牌字段的参数整理为“ID：品牌名称”，并且渲染到页面

 this.searchParams.trademark = `${trademark.tmId}:${trademark.tmName}`;

this.getData();

3.这个时候，父组件里的面包屑已有我们点击品牌（“华为”）的字段了，只不过显示出来为“3：华为”，我们不需要前面的序号id，故使用split切割，以便得到我们想要“华为”。

{{searchParams.trademark.split(':')[1]}}

4.功能继续优化，点击“x”，可以关闭“华为”，继续渲染出合理的筛选到的页面。

给<i @click="removeTrademark">×</i>绑定面包屑移除事件。methods里面写：

removeTrademark(){
      // 将品牌信息置空
      this.searchParams.trademark = undefined;
      // 再次发请求
      this.getData();