07前端项目----面包屑

效果

实现代码

• 上节searchParams中参数categoryName是表示一二三级分类所点击的列表名

<!--bread面包屑-->
<div class="bread"><ul class="fl sui-breadcrumb"><li><a href="#">全部结果</a></li></ul><ul class="fl sui-tag"><!--三级分类的面包屑--><li class="with-x"  v-for='searchParams.categoryName'>{{searchParams.categoryName}}<i @click="removeCategoryName">×</i></li><!-- 搜索框keyword面包屑--><li class="with-x"  v-for='searchParams.keyword'>{{searchParams.keyword}}<i @click="removeKeyword">×</i></li></ul>
</div>

如果searchParams中存在categoryName属性则展示;
x则是删除该项categoryName事件

methods:{removeCategoryName(){//则将三级列表的categoryName,以及id全部置为undefinedthis.searchParams.categoryName = undefined;this.searchParams.category1Id = undefined;this.searchParams.category2Id = undefined;this.searchParams.category3Id = undefined;//整理参数this.getDate();//地址栏也需要修改，将quey(三级联动)参数移除，但是params参数（搜索框）需要保留（需要判断是否有params参数）//可以省掉if?this.$route.params永远为true,即使没有参数也会返回空对象{}//可以再次跳转/* if(this.$route.params){this.$route.replace({name:'search',params:this.$route.params});*/this.$route.replace({name:'search',params:this.$route.params});}},}

keyword的面包屑：

removeKeyword(){this.searchParams.keyword = undefined;this.getDate();//搜索框置空//路由跳转this.$route.replace(name:'search',query:this.$route.query);}

需要让兄弟组件Header组件的输入框置空
设计组件通信方式:
props:父传子
自定义事件：子传父
vuex:数据状态统一管理
插槽：父传子
pubsub-js:订阅发布
$bus全局事件总线

全局事件总线-$bus

//main.js...省略其他
new Vue({//全局事件总线$bus配置beforeCreate(){Vue.prototype.$bus = this}
})

removeKeyword(){//全局事件绑定this.$bus.$emit('clear');	}

//header组件index.vue
mounted(){this.$bus.$on("clear",()=>{this.keyword = "";})
}

• 完整代码

removeKeyword(){this.searchParams.keyword = undefined;this.getDate();//搜索框置空//全局事件绑定this.$bus.$emit('clear');	//路由跳转this.$route.replace(name:'search',query:this.$route.query);}