Vue兄弟组件通信

571 阅读1分钟

需求分析

页面布局

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")
    })
},