效果

實現代碼

• 上節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);}