博主每日分享关于IT编程开发的博文
当前位置:IT技术宅 > web前端 > VUE > 正文

Vue 非父子组件之间的通信

04-01 VUE

 实现非父子组件之间的通信,有以下几种方式

  • Bus总线。创建一个空的Vue对象作为Bus中央事件总线(中间组件)。

  • vuex(适合大型项目,小项目效果不明显)

  • provide/inject(同根往下派发)

  • 本地存储

 第一种是最常用的,此处只介绍第一种。

 

 

bus总线实现非父子组件之间的通信

<div id="app"></div>
        
        
    <script>
        // 创建一个空的Vue对象作为bus中央事件总线
        Vue.prototype.$bus=new Vue();                  Vue.component('MyHeader',{             template:`                 <div>
                    <p>this is the header area</p>
                    <button @click="send">向body传递数据</button>  <!--调用的函数可以带参数-->
                </div>
            `,             methods:{                 send(){ //可带参数
                    this.$bus.$emit("received","hello")  //触发一个自定义事件,该事件可以携带0、1、多个数据。事件、数据都放在bus总线中
                }             }                      })                   Vue.component('MyBody',{             template:`                 <div>
                    <p>this is the body area</p>
                    <p>来自header的数据:{{msg}}</p>  <!-- 展示接收到的数据 --->
                </div>        
            `,             data(){                 return{                     msg:''                 }             },             created(){  //在created(){}中写监听
                //写法一
                //var self=this;  //直接用this没效果,需要把this赋给一个临时变量,使用临时变量代替this
                //在bus总线中注册一个事件监听,当指定的事件发生时会调用对应的函数
                //self.$bus.$on('received',function(val){  //此处使用匿名函数
                //    self.msg=val; 
                //});
                
                //写法二
                this.$bus.$on('received',val=>{  //使用ES6的箭头函数,这种方式可以直接使用this。更简洁,推荐。
                    this.msg=val;                 })             }         })                               new Vue({             el:'#app',             template:`                 <div>
                    <my-header></my-header>
                    <my-body></my-body>
                </div>
            `,         });              </script>

说明

第一种写法原本是这样的:

this.$bus.$on('received',function(val){        this.msg=val;   });

我们想要的是2个this都应该是指向当前组件的,这样this.msg才能获取到当前组件的msg变量。

但实际上,第二个this(函数体中的那个this),指向的bus总线,this.$bus  当前对象已经变成了bus总线,所以要借助一个临时变量。

 

 

第二种写法:

箭头函数不改变作用域,2个this都是指向当前组件,可以直接使用this。

版权保护: 本文由 IT技术宅 原创,转载请保留链接: https://www.ziyuanso.cn/article/web/VUE/2020/0401/14.html

  • 上一篇:没有了
  • 下一篇:没有了
博客主人Kings Lee
男,文化程度不高性格有点犯二,已经20来岁至今未婚,闲着没事喜欢研究各种代码,资深技术宅。
  • 文章总数
  • 1722访问次数
  • 建站天数
  • 标签

    友情链接