了解事件总线
Posted stay_少年与梦
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了了解事件总线相关的知识,希望对你有一定的参考价值。
什么是公交事件总线(bus)
一个空的Vue实例,
var bus=new Vue(),
作用
用于组件之间的 简单通信.
步骤
1.创建事件总线,就是实例化一个空Vue对象赋值给一个变量
2.通过这个对象调用.$emit('消息名','值')
发布消息
3.使用.$on('消息名',处理函数)
用来监听
.$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 来接收频道信号
以上是关于了解事件总线的主要内容,如果未能解决你的问题,请参考以下文章