vue中eventBus的使用
使用场景:
1、兄弟组件的通信,父子组件的通信2、不同路由的通信
针对兄弟组件的通信,父子组件的通信
新建bus.js文件
import vue from 'vue'
var bus = new Vue()
export default bus在需要通信的组件中引入bus.js,一个组件触发事件,另一个组件监听事件
import Bus from "@/assets/js/bus.js"
子组件
testClick(){
alert("test")
Bus.$emit("message","hiinew")
},
父组件
mounted(){
var _this = this
Bus.$on("message",function(res){
_this.message = res
})
}针对不同路由的通信
//需要在A组件销毁前触发事件
beforeDestroy () {
Bus.$emit("message","hii")
},
//在B组件created中接收事件
created () {
var _this = this
Bus.$on("message",function(res){
console.log(res+"123")
_this.message = res
})
},
//并且在B组件的销毁前解除监听 避免重复监听
beforeDestroy () {
Bus.$off("message")
},本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!