Vue2项目实战--b站尚硅谷--尚品汇项目--详细笔记--day05

1 搜索模块中的一些注意点

在哪里发送请求比较合适，在mounted中发送只会挂在完成发送一次显然不行

关键点是$route是search组件的一个响应式数据也属于data可以监听

    //把这次请求封装成一个函数，需要的时候调用
    getData() {
      this.$store.dispatch("getSearchList", this.searchParams);
    },
  beforeMount() {
    //复杂写法
    // this.searchParams.category1Id = this.$route.query.category1Id;
    // this.searchParams.category2Id = this.$route.query.category2Id;
    // this.searchParams.category3Id = this.$route.query.category3Id;
    // this.searchParams.categoryName = this.$route.query.categoryName;
    // this.searchParams.keyword = this.$route.query.keyword;
    //Object.assign：合并对象写法 ES6
    Object.assign(this.searchParams, this.$route.query, this.$route.params);
  },
  mounted() {
    //5 派发请求
    //在发送请求之前带给服务器参数【searchParams发送变化，有数值带给服务器】，所以在发送之前改一下数据 发给服务器，在beforeMount里面改
    this.getData();
  },
  watch: {
    //监听属性
    $route() {
      //当再次发送请求之前应该重新整理一下参数 带给服务器
      Object.assign(this.searchParams, this.$route.query, this.$route.params);
      //再次发送 实现动态发送请求
      this.getData();
      //每一次请求完毕，应该把相应的 123级分类id置空，接收下一次的
      //分类名字和搜索关键字不用清理
      this.searchParams.category1Id = "";
      this.searchParams.category2Id = "";
      this.searchParams.category3Id = "";
    },
  },

2 面包屑

面包屑可能有可能没有，取决于categoryName有没有，想到v-if或者v-show

<li class="with-x" v-if="searchParams.categoryName">
  {{ searchParams.categoryName }}<i>×</i>
</li>

点击❌小时而且重新发请求获取默认数据

分类的名字：

	<i @click="removeCategoryName">×</i>

    removeCategoryName() {
      //把带给服务器的参数置空了 当参数可有可无时（API），写undefined的好处是，空的不会带给服务器了，减少压力
      this.searchParams.categoryName = undefined;
      //这个与下面同理
      this.searchParams.category1Id = undefined;
      this.searchParams.category2Id = undefined;
      this.searchParams.category3Id = undefined;
      //置空完毕还要发一次请求
      this.getData();
      //地址栏也需要修改 进行路由跳转----自己跳自己
      // this.$router.push({ name: "search" });
      //不严谨：本意时删除query参数，如果路径中出现params参数，应该带过去
      if (this.$route.params) {
        this.$router.push({ name: "search", params: this.$route.params });
      }
    },

搜索关键字：

关键之处在于兄弟组件间通信，配置全局事件总线

	//1 main.js中配置
    //全局事件总线
    beforeCreate() {
      Vue.prototype.$bus = this
    },
	//2 search组件中
    //删除关键字
    removeKeyword() {
      // 给服务器带的参数saerchParams的keyword置空
      this.searchParams.keyword = undefined;
      //再次发请求
      this.getData();
      //还要将搜索框的文本置空 这个在Header组件中 和search组件时兄弟关系-----组件间通信
      //通知兄弟组件干掉关键字
      this.$bus.$emit("clear")
    },
    //3 Header组件中
    mounted() {
    	//通过全局事件总线清除关键字
    	this.$bus.$on("clear", () => {
     	 this.keyword = "";
    	});
  	},
    //4 search路由组件中
    removeKeyword() {
      //还要将搜索框的文本置空 这个在Header组件中 和search组件时兄弟关系-----组件间通信
      //通知兄弟组件干掉关键字
      this.$bus.$emit("clear");
      //进行路由的跳转
      // this.$router.push({ name: "search" });
      //不严谨，删了params参数不带，但是query参数要带
      if (this.$route.query) {
        this.$router.push({ name: "search", query: this.$route.query });
      }
    },

品牌中的面包屑：

注意点 品牌是在search组件的子组件当中—子给父组件间通信—自定义事件

	//子给父---自定义事件
	//1 在父组件中给子组件绑定自定义事件
    <SearchSelector @trademarkInfo="trademarkInfo"/>
	//2 子组件中触发---带着信息过去
    methods: {
    	//品牌的事件处理函数
    	tradeMarkHandler(trademark) {
      	//点击品牌：需要整理参数，向服务器获取相应的数据进行展示
      	//谁来发请求：父组件 因为searchParams在父组件中 ，所以子组件要把点击的品牌信息传给父组件---子给父---自定义事件
      	this.$emit("trademarkInfo", trademark); //带着品牌的信息过去
    	},
  	},
    //3 父组件拿到数据了 整理参数 发请求
    //自定义事件回调
    trademarkInfo(trademark) {
    	//捞到数据之后 整理参数 发请求
    	//格式时：“ID：品牌名称”
    	this.searchParams.trademark = `${trademark.tmId}:${trademark.tmName}`;
    	//再次发请求
    	this.getData();
    }, 
    //4 也要在面包屑进行展示

	<!-- 4.1 品牌信息的面包屑 -->
	<li class="with-x" v-if="searchParams.trademark">
	{{ searchParams.trademark.split(":")[1]}}
	<i @click="removeTrademark">×</i>
	</li>

	//4.2
    //删除品牌的信息
    removeTrademark() {
      this.searchParams.trademark = undefined;
      //再次发请求
      this.getData();
    },

售卖属性

子父通信—自定义事件

	//1 子组件中
	<!-- 属性值 -->
	<li v-for="(attrValue, index) in attr.attrValueList" :key="index" @click="attrInfo(attr,attrValue)">
	<a>{{ attrValue }}</a>
	</li>
	//2 父组件中： @attrInfo="attrInfo"
    <SearchSelector @trademarkInfo="trademarkInfo" @attrInfo="attrInfo"/>

	//3 子组件中 
    attrInfo(attr,attrValue){
		//格式要求 属性ID 属性值 属性名  attr包含Id和属性名
		//点击了事件 触发了, 给父亲送数据
		this.$emit("attrInfo",attr,attrValue)
	}
	//4 父组件中捞到数据
    attrInfo(attr, attrValue) {
		//捞到数据   整理参数 发请求
		let prop = `${attr.attrId}:${attrValue}:${attr.attrName}`;
		this.searchParams.props.push(prop);
		//再次发请求
		this.getData();
	},

没有的才往里面push 数组去重

注意：这里还用v-if吗，不可以，props中现在是一个数组，有多少数据都要展示

	// 5 展示面包屑            
	<!-- 品牌属性的面包屑 -->
     <li
		class="with-x"
		v-for="(attrValue, index) in searchParams.props"
		:key="index"
	>
	{{ attrValue.split(":")[1] }}
     <i @click="removeAttr(index)">×</i>
	</li>

    attrInfo(attr, attrValue) {
      //捞到数据   整理参数 发请求
      let prop = `${attr.attrId}:${attrValue}:${attr.attrName}`;
      //没有的才往里面push 数组去重
      if (this.searchParams.props.indexOf(prop) == -1) {
        this.searchParams.props.push(prop);
      }
      //再次发请求
      this.getData();
    },

	//6 删除面包屑
    removeAttr(index) {
      //整理 对数组的操作
      this.searchParams.props.splice(index, 1);
      //再次发请求
      this.getData();
    }

今日陷阱：

• 没有点进去搜索页面，一直留在home怎么可能看到search的数据呢？？？？？？？