需求分析
页面布局
app.vue
headerNav页面
点击头部的搜索按钮 单页面查询数据
step1
main.js中引入 bus
new Vue({
el: '#app',
router,
store,
data:{
Bus:new Vue()
},
components: { App,HeaderNav },
template: '<App/>'
})
step2:
headNav组建中传递参数
searchData(){
// console.log(this.$route.path,"//////////")
if(this.$route.path == '/deal'){
this.$root.Bus.$emit('transKey',this.search_data)
}else{
this.$router.push('/deal')
// Cookies.set('search_data',this.search_data)
this.$root.Bus.$emit('transKey',this.search_data)
}
}
step3
deal.vue组件接受参数
created () {
this.$emit('header', true);
this.getcateList()
this.getlevelList()
this.getList()
this.$root.Bus.$on('transKey',function(key){
console.log(key,"key5555555")
})
},