博客
关于我
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/

你可能感兴趣的文章
Metasploit CGI网关接口渗透测试实战
查看>>
Metasploit Web服务器渗透测试实战
查看>>
Moment.js常见用法总结
查看>>
MongoDB出现Error parsing command line: unrecognised option ‘--fork‘ 的解决方法
查看>>
MongoDB学习笔记(8)--索引及优化索引
查看>>
ms sql server 2008 sp2更新异常
查看>>
MS UC 2013-0-Prepare Tool
查看>>
msbuild发布web应用程序
查看>>
MSCRM调用外部JS文件
查看>>
MSEdgeDriver (Chromium) 不适用于版本 >= 79.0.313 (Canary)
查看>>
msf
查看>>
MSSQL数据库查询优化(一)
查看>>
MSSQL日期格式转换函数(使用CONVERT)
查看>>
MSTP多生成树协议(第二课)
查看>>
MSTP是什么?有哪些专有名词?
查看>>
Mstsc 远程桌面链接 And 网络映射
查看>>
Myeclipse常用快捷键
查看>>
MyEclipse用(JDBC)连接SQL出现的问题~
查看>>
myeclipse的新建severlet不见解决方法
查看>>
MyEclipse设置当前行背景颜色、选中单词前景色、背景色
查看>>