今天主要介绍一下vue的组件通信方式，父子通信，爷孙通信，兄弟通信。
先介绍一下组件基础

组件基础

基本示例
这里有一个 Vue 组件的示例：

// 定义一个名为 button-counter 的新组件

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

以下为三种通信方式的具体介绍。

父子通信

父组件–> 子组件

属性设置

父组件关键代码如下：

<template>
    <Child :child-msg="msg"></Child>
</template>

子组件关键代码如下：

export default {
  name: 'child',
  props: {
    child-msg: String
  }
};

child-msg 为父组件给子组件设置的额外属性值，属性值需在子组件中设置props，子组件中可直接使用child-msg变量。

子组件调用父组件

子组件通过 $parent 获得父组件，通过 $root 获得最上层的组件。

子组件–> 父组件

发送事件/监听事件

子组件中某函数内发送事件：

this.$emit('toparentevent', 'data');

父组件监听事件：

<Child :msg="msg" @toparentevent="todo()"></Child>

toparentevent 为子组件自定义发送事件名称，父组件中@toparentevent为监听事件，todo为父组件处理方法。

父组件直接获取子组件属性或方法

给要调用的子组件起个名字。将名字设置为子组件 ref 属性的值。

<!-- 子组件。 ref的值是组件引用的名称 -->


<child-component ref="aName"></child-component>

父组件中通过 $refs.组件名来获得子组件，也就可以调用子组件的属性和方法了。

var child = this.$refs.aName
child.属性
child.方法()

父组件通过 $children 可以获得所有直接子组件（父组件的子组件的子组件不是直接子组件）。需要注意 $children 并不保证顺序，也不是响应式的。

爷孙通信

在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。

index.html，只有一个路由出口


<div id="app">  
    <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->  
    <router-view></router-view>  
</div>

main.js，路由的重定向，就会在页面一加载的时候，就会将home组件显示出来，因为重定向指向了home组件，redirect的指向与path的必须一致。children里面是子路由，当然子路由里面还可以继续嵌套子路由。

import Vue from 'vue'  
import VueRouter from 'vue-router'  
Vue.use(VueRouter)  

//引入两个组件  
import home from "./home.vue"  
import game from "./game.vue"  
//定义路由  
const routes = [  
    { path: "/", redirect: "/home" },//重定向,指向了home组件  
    {  
        path: "/home", component: home,  
        children: [  
            { path: "/home/game", component: game }  
        ]  
    }  
]  
//创建路由实例  
const router = new VueRouter({routes})  

new Vue({  
    el: '#app',  
    data: {  
    },  
    methods: {  
    },  
    router  
})

home.vue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，否则子路由无法显示。

<template>  
    <div>  
        <h3>首页</h3>  
        <router-link to="/home/game">  
            <button>显示<tton>  
        </router-link>  
        <router-view></router-view>  
    </div>  
</template>  
 game.vue
[html] view plain copy
<template>  
    <h3>游戏</h3>  
</template>

兄弟通信

当是同级组件需要通信时可以创建一个空的vue实例(bus)作为桥梁来进行通讯
这里写图片描述

各组件可自己定义好组件内接收外部组件的消息事件即可，不用理会是哪个组件发过来；而对于发送事件的组件，亦不用理会这个事件到底怎么发送给我需要发送的组件。

先设置Bus

//bus.js 
import Vue from 'vue'
export default new Vue();
组件内监听事件：

import bus from '@/bus';

export default {
  name: 'childa',
  methods: {
  },
  created() {
    bus.$on('childa-message', function(data) {
      console.log('I get it');
    });
  }
};

发送事件的组件：

import bus from '@/bus';
//方法内执行下面动作
bus.$emit('childa-message', this.data);

vue 组件通信