前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue非父子通讯(BUS/总线机制/订阅者模式)

vue非父子通讯(BUS/总线机制/订阅者模式)

作者头像
十月梦想
发布2018-10-09 15:21:59
1.2K0
发布2018-10-09 15:21:59
举报
文章被收录于专栏:十月梦想

前面我们讲述的是父子间的数据通讯,那么这里就来介绍非父子间通讯!之前的发布的《一天带你入门到放弃vue.js(二)》中介绍了使用Event调度器来实现传递,这里介绍另一种BUS总线方式传递!

我们来定义一个组件,组件的展示内容由自身的属性传递

代码语言:javascript
复制
<son msg="dell" ></son>
<son msg="Ma" ></son>

我们在js代码中先将prototype的bus挂载在vue实例中

代码语言:javascript
复制
Vue.prototype.bus=new Vue();

然后每一次的this(vue实例)都将挂载有这个bus属性

我们来定义一下组件

代码语言:javascript
复制
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(就是子组件获取到来自父级的传递)

代码语言:javascript
复制
    methods:{
        getText:function(){
            //this.bus执行vue实例,
           this.bus.$emit('get',this.Con_msg)
        }
    },

然后在组件的生命周期中将实例中改变msg的值(把点击的组件msg赋值到另外组件的Con_msg(组件调用的内容msg))!

代码语言:javascript
复制
    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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档