vue-事件总线$bus的使用

作用

实现不同组件之间进行通信(非父子关系)。

 

原理

$bus就是vue原型上添加的一个vue实例,用于存储、监听以及触发事件。

 

实现步骤

  1. 在main.js文件中注册事件总线
Vue.prototype.$bus = new Vue();
  1. 在需要发送信息的组件中发送事件
this.$bus.$emit("eventname") //无参传递,eventname表示事件名
this.$bus.$emit("eventname",params) //带参传递,params表示传递的参数
  1. 在需要接收信息的组件中接收事件
//有参
this.$bus.$on("eventname",(params)=>{

});

//无参
this.$bus.$on('eventname', () => {
});
  1. 在接收信息的组件beforeDestroy事件中销毁接收事件
beforeDestroy() {
    this.$bus.$off('eventname');
}
posted @   相遇就是有缘  阅读(697)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
  1. 1 我记得 赵雷
  2. 2 北京东路的日子 汪源
  3. 3 把回忆拼好给你 王贰浪
我记得 - 赵雷
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

Not available

点击右上角即可分享
微信分享提示