Web前端基础教程,前端开发基础教程
总线（Bus）是计算机各种功能部件之间传送信息的公共通信干线，它是由导线组成的传输线束，按照计算机所传输的信息种类，计算机的总线可以划分为数据总线、地址总线和控制总线，分别用来传输数据、数据地址和控制信号。
实现非父子组件之间的通信，有以下几种方式
1、Bus总线，创建一个空的Vue对象作为Bus中央事件总线（中间组件）。
2、vuex（适合大型项目，小项目效果不明显）
3、provide/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)，以比特为单位，总线宽度愈大，传输性能就愈佳。
以上是酷仔今日整理的“Web前端基础教程：Vue非父子组件之间的通信”一文，希望为正在学习Web前端的同学提供参考。
特殊说明：以上资料由开课吧提供！
