了解事件总线

Posted stay_少年与梦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了了解事件总线相关的知识,希望对你有一定的参考价值。

什么是公交事件总线(bus)

一个空的Vue实例,
var bus=new Vue(),

作用

用于组件之间的 简单通信.

步骤

1.创建事件总线,就是实例化一个空Vue对象赋值给一个变量

2.通过这个对象调用.$emit('消息名','值')发布消息

3.使用.$on('消息名',处理函数) 用来监听

  1. .$off('消息名') 销毁

代码如下

var bus = new Vue()
        Vue.component('wxauthor',
            template:`
                <div>
                    <input type='text' ref='neirong'/>
                    <button @click='setwx'>发布</button>
                </div>
            `,
            methods:
                setwx()
                    // 2发布 bus.$emit
                    bus.$emit('wxtext',this.$refs.neirong.value)
                
            
        )

        Vue.component('wxuser',
            template:`
                <div>
                    用户接收
                </div>
            `,
            mounted()
                //生命周期函数,到组件的dom被渲染完成后,自动执行
                
                //3监听
                bus.$on('wxtext',(da)=>
                    console.log(da)
                )
               
            ,
 	destroyed()
	//防止组件创建销毁几次后会重复调用,在这里可以销毁
                bus.$off('wxtext')
            
        )

        new Vue(
            el:'#box'
        )
        

总结

主要通过实例学习了Vue中有关于 EventBus 相关的知识点。
主要涉及了 EventBus 如何实例化,如何通过 $emit 发送频道信号,如何通过 $on 来接收频道信号

以上是关于了解事件总线的主要内容,如果未能解决你的问题,请参考以下文章

.Net Core对于RabbitMQ封装分布式事件总线

.Net Core对于RabbitMQ封装分布式事件总线

事件总线demo

如何使一个公共事件总线在单个spa中交互两个angular4 / 5应用程序

.NET Core 事件总线,分布式事务解决方案:CAP

vue组件中的几种传值方式----下篇