vue非父子组件传值，中央总线模式

import Vue from 'vue'
const bus = new Vue();
export default bus;

<template>
    <div id='footer'>
        <h1>this is footer</h1>
        <button @click='sendMessage'>给header传值</button>
    </div>
    
</template>
<script>
    import bus from '../bus'
    export default{
        data(){
            return {
                msg:'this is footer message'
            }
        },
        methods:{
            sendMessage(){
                bus.$emit('getMessage',this.msg);
            }
        }
    }
</script>

<template>
    <div id='header'>
        <h1>this is header</h1>
        <h1>{{msg}}</h1>
    </div>
</template>
<script>
    import bus from '../bus'
    export default{
        data(){
            return {
                msg:''
            }
        },
        mounted(){
            bus.$on('getMessage',data=>{
                this.msg=data;
            })
        }
    }
</script>