博客
关于我
Vue BUS总线
阅读量:509 次
发布时间:2019-03-07

本文共 1708 字,大约阅读时间需要 5 分钟。

Vue Bus 总线

作用:在vue中实现非父子组件之间通信。

场景:bus适合小项目、数据被更少组件使用,或者数据量少的项目。

本质:实际上是一个发布订阅者模式的使用,利用 vue 的自定义事件机制,在触发时通过 $emit 向外发布一个事件,而在需要使用的页面,通过 $on 监听事件或者说是注册事件。是一个不具备DOM的组件。它就像是所有组件共用相同的事件中心,用它来作为沟通桥梁,可以向该中心注册发送事件或接收事件。

实现:

  1. 使用一个空的 Vue 实例(bus.js)作为中央事件总线。

    // bus.jsimport Vue from 'vue';const bus = new Vue();export default bus

    然后在需要使用的组件中引入

  2. 把 bus 定义在 vue 的 prototype 上,在全局使用。

    同样的我们在创建 bus 后,可以在 main.js 中去引入 bus,然后将其挂载在vue实例上。

    import bus from './bus.js'Vue.prototype.$bus = bus
  3. 或者使用插件 vue-bus 也可以。

    npm i vue-bus --save

    在 main.js 中引入:

    import VueBus from 'vue-bus'Vue.use(VueBus)
  4. 手动实现 Bus 类。

    class Bus {         constructor() {             // 定义回调函数        this.callback = {     }    } 	// 事件注册监听       $on(name, fn) {             this.callback[name] = this.callback[name] || []        this.callback[name].push(fn)    }    // 触发事件    $emit(name,args) {             if (this.callback[name]) {                 // 遍历所有的 callback            this.callback[name].map(cb => cb(args))        }    }    // 移除事件    $off(name) {             if (this.callback[name]) {                 delete this.callback[name]        }    }}

    使用:

    const bus = new Bus()bus.$on('fn1', function (msg) {         alert(`订阅的消息是:${       msg}`)})bus.$emit('fn1', 'Hello World!')

注意:注册的总线事件要在组件销毁时卸载,否则会多次挂载,造成触发一次但多个响应的情况。

如果想要移除事件的监听,如下:

// 移除应用内所有对此事件的监听bus.$off('fn1')bus.$off('fn1', {   })// 移除所有事件频道bus.$off()

那么在实际使用时,我们在需要触发组件里使用 $emit 来触发,并传递相关的值给监听器回调,而在需要接收的页面里使用 $on 去监听对应的自定义事件,并在回调函数中接收传来的值。

// A组件this.bus.$emit('fn', {    value: 'test' })// B组件this.bus.$on('fn', data => {       console.log(data);  // { value: "test" }})

当在 B 组件中的 created 生命周期函数中调用了 $on 后,对应的事件就会被监听,当 e m i t 触 发 后 , emit 触发后, emiton 这边就会对应的产生响应。

公众号:Coder 杂谈,欢迎关注

在这里插入图片描述

转载地址:http://cxbcz.baihongyu.com/

你可能感兴趣的文章
Mysql Row_Format 参数讲解
查看>>
mysql select, from ,join ,on ,where groupby,having ,order by limit的执行顺序和书写顺序
查看>>
MySQL Server 5.5安装记录
查看>>
mysql slave 停了_slave 停止。求解决方法
查看>>
MySQL SQL 优化指南:主键、ORDER BY、GROUP BY 和 UPDATE 优化详解
查看>>
mysql sum 没返回,如果没有找到任何值,我如何在MySQL中获得SUM函数以返回'0'?
查看>>
mysql Timestamp时间隔了8小时
查看>>
Mysql tinyint(1)与tinyint(4)的区别
查看>>
mysql union orderby 无效
查看>>
mysql where中如何判断不为空
查看>>
mysql workbench6.3.5_MySQL Workbench
查看>>
MySQL Workbench安装教程以及菜单汉化
查看>>
MySQL Xtrabackup 安装、备份、恢复
查看>>
mysql [Err] 1436 - Thread stack overrun: 129464 bytes used of a 286720 byte stack, and 160000 bytes
查看>>
MySQL _ MySQL常用操作
查看>>
MySQL – 导出数据成csv
查看>>
MySQL —— 在CentOS9下安装MySQL
查看>>
mysql 不区分大小写
查看>>
mysql 两列互转
查看>>
MySQL 中开启二进制日志(Binlog)
查看>>