Vue组件通信之跨组件跨层级传递

第一个方法就是转换为父子层级关系来解决（虽然可以解决，但是如果业务逻辑较多了嵌套比较深以后维护就会非常繁琐），至于详情请参考上一篇内容；

这里主要说另一种方法event-bus （事件总线），就是借助Vue实例中的$on()与$emit()方法，来实现数据传递

用法：

• 创建全局的空 Vue 实例: new Vue()
• 在需要接收数据的组件中，利用 $on() 绑定自定义事件，关联事件处理程序(通常事件处理程序中会接收数据实现业务功能)，在这里用到了生命周期钩子函数created(){}
• 在需要传递数据的组件中，利用$emit)触发自定义事件，在触发执行事件时，传递数据

<divid="app"><my-header></my-header><my-center></my-center><my-footer></my-footer></div><script>// 5、 创建全局的空 Vue 实例const bus=newVue()// 3、定义 局部 组件的选项对象const list={         template:` 			<!--7、绑定事件 --> 			<div @click='add'>xxxxxxxxx</div> 		`,         methods:{// 8、通过$emit()去 去调用 toggle, 并传递数据add(){                 bus.$emit('toggle','要传递的数据')}}}// 2、创建一个全局组件     vue.component('MyHeader',{         template:` 			<div> 				xxxxxx 				<div> 					<list></list>     			</div>     		</div> 		`,         components:{// 4、局部组件注册             List:list// List 作为 MyHeader 的子组件进行注册}})// 1、创建 Vue 实例newVue({         el:'#app',         data:{             todos:[{xx:'xx'},{xx:xx},{yy:‘yy’}],},created(){// 6、调用生命周期钩子函数// 这是在实例创建后会被自动调用到的方法// 该组件会接收数据，则利用 event-bus 的 bus对象，绑定自定义事件//  bus.$on(注册事件名称,绑定事件处理程序)             bus.$on('toggle',this.add)},         methods:{// 事件处理程序add(id){                 console.log(id)}}})</script>