了解事件总线

Posted 2021-06-24 stay_少年与梦

什么是公交事件总线（bus）

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

作用

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

步骤

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

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

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

4. .$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 来接收频道信号