Vue组件之间数据传递之eventbus的使用方法
eventbus事件总线的方式,可以进行非父子组件之间的通信,除Vuex以为比较便利的一种组件之间数据通信的方式。
下面让我们来通过一个例子了解一下,是如何通过eventbus通信的(没有用vue-cli而是直接引入的vue.js)
跳过父组件,直接进行祖父和孙子组件之间通信
首先我们再html页面创建一个Vue实例为eventbus
// eventbus是随意起的变量名
var eventbus = new Vue();接下来我们再创建一个vue实例为vm,我们再祖父组件中定义个点击方法handler,并通过Vue实例方emit发送事件名和需要传递的数据内容。(emit前一定要加$$这个是Vue中自带的事件,固定写法,不然会报错)
var vm = new Vue({
el:'#app',
methods:{
handler(){
eventbus.$emit('aaa','grandfather to grandson')
//aaa 为事件名, grandfather to grandson是需要传递的内容
}
},
components:{
son
}
})
.在孙子组件中通过Vue实例中的$on来监听事件和接收到的数据,msg就是传递过来的数据,也是自己起的名字,你可以根据需求起名。
注意: 通常挂载监听是在vue生命周期的created或mounted中,具体情况还是看项目需求,这里不多赘述.mounted(){
eventbus.$on('aaa',(msg)=>{
console.log(msg)
})
}
下面看一下具体代码,这里的father组件只是进行演示,不通过father组件,grandson也能拿到grandfather中的值
运行结果如下:
总结:这种方法虽然组件之间通信比较方便,但是缺点是数据不支持响应式,工作项目中这个还是用的不多的.
还没有评论,来说两句吧...