web前端：Vue非父子组件之间的通信

　　总线（Bus）是计算机各种功能部件之间传送信息的公共通信干线，它是由导线组成的传输线束，按照计算机所传输的信息种类，计算机的总线可以划分为数据总线、地址总线和控制总线，分别用来传输数据、数据地址和控制信号。

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

　　1Bus总线。创建一个空的Vue对象作为Bus中央事件总线（中间组件）。

　　2vuex（适合大型项目，小项目效果不明显）

　　3provide/inject（同根往下派发）

　　4本地存储

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

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

　　<divid="app"></div>

　　<script>

　　//创建一个空的Vue对象作为bus中央事件总线

　　Vue.prototype.$bus=newVue();

　　Vue.component('MyHeader',{

　　template:`

　　<div>

　　<p>thisistheheaderarea</p>

　　<button@click="send">向body传递数据</button><!--调用的函数可以带参数-->

　　</div>

　　`,

　　methods:{

　　send(){//可带参数

　　this.$bus.$emit("received","hello")//触发一个自定义事件，该事件可以携带0、1、多个数据。事件、数据都放在bus总线中

　　}

　　}

　　})

　　Vue.component('MyBody',{

　　template:`

　　<div>

　　<p>thisisthebodyarea</p>

　　<p>来自header的数据：{{msg}}</p><!--展示接收到的数据--->

　　</div>

　　`,

　　data(){

　　return{

　　msg:''

　　}

　　},

　　created(){//在created(){}中写监听

　　//写法一

　　//varself=this;//直接用this没效果，需要把this赋给一个临时变量，使用临时变量代替this

　　//在bus总线中注册一个事件监听，当指定的事件发生时会调用对应的函数

　　//self.$bus.$on('received',function(val){//此处使用匿名函数

　　//self.msg=val;

　　//});

　　//写法二

　　this.$bus.$on('received',val=>{//使用ES6的箭头函数，这种方式可以直接使用this。更简洁，推荐。

　　this.msg=val;

　　})

　　}

　　})

　　newVue({

　　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。

　　如果说主板(MotherBoard)是一座城市，那么总线就像是城市里的公共汽车(bus)，能按照固定行车路线，传输来回不停运作的比特(bit)。这些线路在同一时间内都仅能负责传输一个比特。因此，必须同时采用多条线路才能传送更多数据，而总线可同时传输的数据数就称为宽度(width)，以比特为单位，总线宽度愈大，传输性能就愈佳。