Vue组件触发另一个组件的方法

Vue组件触发另一个组件的方法

前言：当点击申请之后，头部组件上的值要动态发生变化，所以我们采取事件总线的方式

1.全局注册bus总线

// main.js 将$bus挂载在原型上
Vue.prototype.$bus = new Vue();

列表页面

async shenqing(row){
    	// 请求后台接口
      let res = await addApply(row.id)
      // res.code为0 即没有错误
      if(res.code == 0){
        this.initTable()
         //$emit触发事件，小括号中是事件名称
        this.$bus.$emit('openDemandList')
        this.$message.success(res.message)
      }else{
        this.$message.error(res.message)
      }
  },

头部组件

created(){
     // 通$on接收传过来的事件
      this.$bus.$on('openDemandList',() =>{
         // 函数体内即为代码逻辑 我这里是重新调用接口以获得最新数量
        this.initApplyAndSubCount()
      })
      this.initApplyAndSubCount()
    },

最后记得关闭bus总线

beforeDestroy(){
  this.$bus.$off('openDemandList') 
}

效果图