vue非父子通讯(BUS/总线机制/订阅者模式)
前面我们讲述的是父子间的数据通讯,那么这里就来介绍非父子间通讯!之前的发布的《一天带你入门到放弃vue.js(二)》中介绍了使用Event调度器来实现传递,这里介绍另一种BUS总线方式传递!
我们来定义一个组件,组件的展示内容由自身的属性传递
<son msg="dell" ></son>
<son msg="Ma" ></son>我们在js代码中先将prototype的bus挂载在vue实例中
Vue.prototype.bus=new Vue();然后每一次的this(vue实例)都将挂载有这个bus属性
我们来定义一下组件
Vue.component('son',{
props:['msg'],
data:function(){
return {
Con_msg:this.msg
}
},
template:`
<p @click="getText">{{Con_msg}}</p>
`,
methods:{
getText:function(){
//this.bus执行vue实例,
this.bus.$emit('get',this.Con_msg)
}
},
mounted:function(){
var that=this;
this.bus.$on('get',function(msg){
that.Con_msg=msg
})
}
})将组件的获取数据挂载到props中,由于父级组件传递,单项数据流,后面我们要进行修改,把这个数据赋值给组件的data中,给组件模板中绑定一个事件,点击后下面的组件内容改变!
在组件中的methods中定义一个的方法,我们通过挂载的bus监听这个Con_msg(就是子组件获取到来自父级的传递)
methods:{
getText:function(){
//this.bus执行vue实例,
this.bus.$emit('get',this.Con_msg)
}
},然后在组件的生命周期中将实例中改变msg的值(把点击的组件msg赋值到另外组件的Con_msg(组件调用的内容msg))!
mounted:function(){
var that=this;
this.bus.$on('get',function(msg){
that.Con_msg=msg
})
}上面的话是不是感觉很绕?简单说一下流程吧!就是点击一个组件,这个组件的msg赋值给data数据层的Con_msg,由于数据层只能单向不能修改父级的数据,需要保存到自身的一个data中,然后给子组件绑定点击事件,在子组件的methods中使用挂载的bus监听一个事件,传递这个msg,然后在生命周期函数中,把这个组件的msg改为第一个调用的Con_msg!就是直接改变了data层的msg是点击组件的那个!
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-9-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
