Vue 事件总线 $bus的基本使用

//入口文件main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//注册三级联动为全局组件
import TypeNav from '@/components/TypeNav'

//执行mock 
import '@/mock/mockServe'

//引入Swiper插件需要的CSS
import 'swiper/css/swiper.css'

//名称 及 组件
Vue.component(TypeNav.name, TypeNav);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App),
  //配置全局事件总线$bus
  beforeCreate() {
    Vue.prototype.$bus = this;
  },
}).$mount('#app')

//适用于兄弟之间传参或者执行某一段业务 


//search组件需要告知header组件 清空keyword 

RemoveKeyWord() {
      this.ParamsInit();
      this.SearchParams.keyword = undefined;
      //同时通过$bus 清理兄弟组件中的关键字 当然也可以进行传参例如我传入一个字符串test
      this.$bus.$emit('clearKeyWord','test')
      if (this.$route.query) {
        this.$router.push({ name: "search", query: this.$route.query });
      }
    },


//header.vue 组件需要通过监听 search组件的操作来进行输入框的清空

  mounted(){
    //通过$bus监听到兄弟组件触发的清除事件 则进行keyword的清空
    this.$bus.$on('clearKeyWord',(str)=>{
      //那么这边就会接受到test字符串  
      console.log(str,'test')
      this.keyword = ''; 
    })
  },