万金油：vue中央事件总线的使用

vue中央事件总线这种方法适用于任何情况的父子组件通信，同级别组件通信，相当于组件通信间的万金油。但是碰到多人合作时，代码的维护性较低，代码可读性低（这个缺点可以忽略）。

在vue-cli中使用 集中式事件管理机制：

第一步：在 src 新建 emit/emit.js，.js文件内容：

import Vue from 'vue';

const Emit = new Vue({});

export{
    Emit
}

复制代码

第二步：在 src/main.js 下引入

import {Emit} from './emit/emit.js';

Vue.proptotype.Emit = Emit;

复制代码

示例：index.vue为父组件，两个子组件 header.vue、footer.vue。

在mounted生命周期里通过this.Emit.$on()监听。

在destroyed生命周期里面通过this.Emit.$off()解除绑定。一定要解除绑定事件！！！

//父组件：index.vue：
<template>
	<div class="indexPageWrap">
		<header></header>
        <footer></footer>
	</div>
</template>
<script type="text/javascript">
   import header from './header.vue';
   import footer from './footer.vue';
    export default{
        data () {
        	return {
        	    index:0
        	}
        },
        mounted () {
            this.Emit.$on('fromHeader',this.indexFormHeader);
            this.Emit.$on('fromFooter',this.indexFromFooter);
        },
        //注意：在组件销毁时，一定要解除绑定事件：
        destroyed(){
            this.Emit.$off('fromHeader');
            this.Emit.$off('fromFooter');
        },
        components : {
        	header,
        	footer
        },
        methods : {
            indexFormHeader(vlaue){
                console.log('from header');
                console.log(value)
            },
            indexFromFooter(){
                console.log('from footer')
            }
        }
    }
</script>
<style type="text/css">
	
</style>
复制代码

子组件 header.vue

通过this.Emit.$emit()传递数据

//子组件 header.vue
<template>
	<div class="headerPageWrap">
		<div @click="headerEmit">Emit<div>
	</div>
</template>
<script type="text/javascript">
    export default{
    	data () {
    		return {
    			index:0
    		}
    	},
    	mounted () {
    	    this.Emit.$on('headerTofooter',this.headerFromFoot)
    	},
    	destroyed(){
    	    this.Emit.$off('headerTofooter')
    	},
    	components : {
    		
    	},
    	methods : {
    	    headerEmit(){
            	this.Emit.$emit('fromHeader',{value:"123"}); //可以传递数据
            },
            headerFromFoot(){
            	console.log('from footer');
            }
    	}
    }
</script>
<style type="text/css">
	
</style>
复制代码

//子组件 footer.vue
<template>
	<div class="footerPageWrap">
		<div @click="footerEmit">Emit<div>
        <div @click="footerEmitToHeader">Emit<div>
	</div>
</template>
<script type="text/javascript">
    export default{
        data () {
            return {
            	index:0
            }
        },
        mounted () {
        
        },
        components : {
        
        },
        methods : {
            footerEmit(){
            	this.Emit.$emit('fromFooter'); //不传递数据
            },
            footerEmitToHeader(){
               this.Emit.$emit('headerTofooter'); //不传递数据
            }
        }
    }
</script>
<style type="text/css">
	
</style>
复制代码