4.28学习笔记

开发floor组件

1. getFloorList这个action在哪里触发， 是需要在home路由组件内部去发，不能在Floor组件内部发，因为需要v-for遍历Floor组件
2. v-for也可以在自定义标签中使用
3. 组件通信的方式有哪些？
   props： 用于父子组件通信
   自定义事件：$on $emit子给父通信全局事件总线：$bus 全能
   pubsub-js:vue当中几乎不用 全能
   插槽
   vuex
4. 把首页当中的轮播图拆分为一个公用的组件
   切记：在开发项目的时候，如果看到某一组件在很多地方使用，把它变成全局组件，注册一次，可以在任意地方使用，共用的组件|非路由组件放到components文件夹中

开发search模块

1.search模块需要的服务器数据已经请求到了，而且存储在vuex的仓库中，而且有一些数据使用getters进行了简化
2.商品列表，平台售卖属性已经使用动态数据【来自于服务器的数据】
3.监听路由变化

  watch:{
    //监听路由的信息是否发生变化，如果发生变化，再次发起请求
    $route(newValue, oldValue){
        //再次发起请求之前，将参数进行整理
        Object.assign(this.searchParams, this.$route.query, this.$route.params)
        this.getData();
        //每一次请求完毕，应该把相应的1，2，3级分类的id置空，让接收下一次新的id
        //分类名字和关键字不用清理：因为每次路由发生变化，都会给它重新赋值
        this.searchParams.category1Id = ''
        this.searchParams.category2Id = ''
        this.searchParams.category3Id = ''
    }
  }

4.面包屑处理
a.动态开发面包屑中的分类名
编程式导航路由跳转【自己跳自己】
b.动态开发面包屑中的关键字
b.1当面包屑中的关键字清除以后，需要让兄弟组件Header组件中的关键字清除
组件通信：
$bus

new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus = this
  },
  //注册路由信息
  //当这里写router的时候，组件身上都拥有$route, $router属性
  router,
  //注册仓库，组件实例身上多了$store属性
  store
}).$mount('#app')

    removeBread(){
        this.searchParams.categoryName = undefined
        this.searchParams.category1Id = undefined
        this.searchParams.category2Id = undefined
        this.searchParams.category3Id = undefined
        if(this.$route.params){
            this.$router.push({name:'search', params:this.$route.params})
        }
    },
    removeKeywords(){
        this.searchParams.keywords = ''
        this.$bus.$emit('clear')
        if(this.$route.query){
            this.$router.push({name:'search', query:this.$route.query})
        }
    }

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