松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › 前端技术:开发一个vue中央事件总线插件vue-bus

前端技术:开发一个vue中央事件总线插件vue-bus

迦娜王
3年前Vue
477 0 0

大家都知道,一个中央事件总线bus,可以作为一个简单的组件传递数据,用于解决跨级和兄弟组件通信问题,那么,这篇文字,我将使用这种思想,将bus封装为一个Vue的插件,可以在所有的组件间任意使用,而不需要导入bus。

首先,我们使用vue-cli创建一个项目vue-bus, 在src目录下,新建vue-bus.js文件,vue-bus插件像vue-router 和 Vuex一样,给Vue对象添加一个属性$bus,并代理$emit、$on、$off三个方法。代码如下:

前端技术:开发一个vue中央事件总线插件vue-bus

在main.js中使用插件,代码如下:

前端技术:开发一个vue中央事件总线插件vue-bus

接下来,在views目录下,新建一个组件 Counter.vue,代码如下:

前端技术:开发一个vue中央事件总线插件vue-bus

在index.vue 组件中,使用Counter组件并监听来自counter.vue的自定义事件,代码如下:

前端技术:开发一个vue中央事件总线插件vue-bus

那么,这样,我们只需要很少的代码,就能够解决跨组件通信的问题,而且通过插件的形式使用后,所有组件都可以直接使用$bus,而无需每个组件都导入bus组件。

使用vue-bus有两点需要注意,第一是$bus.on应该在created钩子内使用,如果在mounted使用,它可能接收不到其他组件来自created钩子内发出的事件;第二点是使用了$bus.on在beforeDestory钩子里应该需要使用$bus.off解除,因为组件销毁后,就没有必要把监听的句柄存储在vue-bus里面了,所以,我们还可以完善一下index.vue的代码,完善后的代码如下:

前端技术:开发一个vue中央事件总线插件vue-bus

这样,我们就完成了一个中央事件总线插件vue-bus,可以实现vue跨级组件之间的通信,在实际的开发项目中,如果数据和业务逻辑不是特别复杂,没有必要使用Vuex,那么我们就可以通过这种方式,实现我们再实际业务逻辑中的组件间数据传递,而且代码比较简洁直观。

0
Laravel5.8 安装使用 vue「原创」
上一篇
通过几个问题深入浅出Vue
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
Servicios profesionales Organizaciones
1年前
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
1年前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
1年前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
1年前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
相关文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
vue3.x reactive、effect、computed、watch依赖关系及实现原理
Vue 3 新特性:在 Composition API 中使用 CSS Modules
新手必看的前端项目去中心化和模块化思想
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 0
  • 0
  • Top