VUE实现全局事件总线步骤

一、实现步骤

1.先在main.js 声明全局事件总线

代码如下（示例）：

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

2.在需要调用全局事件总线方法的组件中调用总线方法

代码如下（示例）：

  // 移除关键字标签面包屑
    removekeyword(){
      //将关键字置空
      this.searchData.keyword ='';
      this.getData()//重新调用请求后台数据方法，否则跳转路由后会数据不对
      this.$bus.$emit('clart',data)//调用全局事件总线中的方法,第二个参数可以携带数据
      //重新跳转路由     
     this.$router.push({name:'search',query:this.$route.query}) 
      
    }

3.在需要被调用全局事件总线方法的组件中声明总线方法

mounted() {
     this.$bus.$on('clart',(data)=>{//绑定全局事件总线方法clart,可以携带参数
       this.searchval =''
     }) 

  },