Vue 非父子组件之间的通信
程序员文章站
2022-09-04 23:09:42
实现非父子组件之间的通信,有以下几种方式 Bus总线。创建一个空的Vue对象作为Bus*事件总线(中间组件)。 vuex(适合大型项目,小项目效果不明显) provide/inject(同根往下派发) 本地存储 第一种是最常用的,此处只介绍第一种。 bus总线实现非父子组件之间的通信
实现非父子组件之间的通信,有以下几种方式
-
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。
上一篇: 赢了再吃