子-->子 （可以通过使用一个空的Vue实例作为中央事件总线，也可以使用app实例）

使用app实例，main.js中将bus挂载到vue原型上

let bus = new Vue();
Vue.prototype.bus = bus;

header组件代码

<template>
    <header @click="changeTitle">{{title}}</header>
</template>
<script>
export default {
    name: 'header',
    data () {
        return {
            title: '头部'
        }
    },
    methods: {
        changeTitle () {
            this.bus.$emit('toChangeTitle',this.title);
        }
    }
}
</script>

footer组件代码

<template>
    <footer>{{txt}}</footer>
</template>
<script>
export default {
    name: 'footer',
    mounted () {
        this.bus.$on('toChangeTitle', function (a) {
            console.log(a);
        })
    },
    data () {
        return {
            txt: '尾部'
        }
    }
}

作者：匆匆那年__
链接：https://www.jianshu.com/p/9ff3a757dbfd
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。