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。