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>