Vue组件触发另一个组件的方法
Vue组件触发另一个组件的方法前言:当点击申请之后,头部组件上的值要动态发生变化,所以我们采取事件总线的方式1.全局注册bus总线// main.js 将$bus挂载在原型上Vue.prototype.$bus = new Vue();列表页面async shenqing(row){// 请求后台接口let res = await addApply(row.id)// res.code为0 即没有
·
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')
}
效果图
更多推荐
已为社区贡献13条内容
所有评论(0)