老生常谈的组件之间通信

vue组件之间的通信细分为三种情况：兄弟组件之间的通信，父组件向子组件传递数据，子组件向父组件传递数据。下面一一说明。

1、兄弟组件之间通信

兄弟组件之间互相传值，需要建立一个“中转站”（新的vue实例），并且需要主动触发。
ps:父组件 App.vue
子组件1：children1.vue
子组件2：children2.vue

App.vue
<template>
  <div id="box">
      <children1></children1>
      <children2></children2>
  </div>
</template>
<script>
import chilaren1 from "children1";
import chilaren2 from "children2";
export default {
    created(){
        const eventBus = new Vue();
    }
    component: {
        chilaren1,
        chilaren2
    }
}
</script>

children1.vue
<template>
<h1>我是兄弟组件1{{msg1}}</h1>
<button @clik="click"></button>
</template>
<script>
export default {
    data() {
        return {
            msg1:"我是兄弟组件1"
        }
    },
    methods:{
        click:function(){
            eventBus.$emit('transmit',this.msg1);
        }
    }
}
</script>

children1.vue
<template>
<h1>我是兄弟组件2{{msg2}}</h1>
<h1>接收组件1的数据{{msg1}}</h1>
</template>
<script>
export default {
    mounted(){
      var self=this;
      eventBus.$on('transmit',(msg1)=>{
          self.msg1=msg1;
      })
    }
    data() {
        return {
            msg2:"我是兄弟组件2"
        }
    }
}
</script>

兄弟组件之间的通信，需要借助一个新的vue实例eventBus,然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。

2、父组件向子组件传递数据

通常我们通过props来实现父组件向子组件的数据传递，就像这样：
ps:父组件：App.vue
子组件：children.vue

App.vue
<template>
  <div id="box">
      <children :msg="msg"></children>
  </div>
</template>
<script>
import chilaren from "children";
export default {
    data(){
        return {
            msg:"我是父组件传递给子组件的数据"
        }
    },
    component: {
        chilaren
    }
}
</script>

children.vue
<template>
<h1>我是子组件{{msg}}</h1>
</template>
<script>
export default {
    props: ['msg']
}
</script>

除此之外，你也可以直接通过调用子组件的方法来实现， 调用子组件方法的时候将父组件中的数据作为参数传递过去，就像这样：

App.vue
<template>
  <div id="box">
      <children ref="child"></children>
      <button @clik="click"></button>
  </div>
</template>
<script>
import chilaren from "children";
export default {
    data(){
        return {
            msg:"我是父组件传递给子组件的数据"
        }
    },
    methods:{
        click: function(){
            this.$refs.child.transmit(this.msg);
        }
    },
    component: {
        chilaren
    }
}
</script>

children.vue
<template>
<h1>我是子组件</h1>
</template>
<script>
export default {
    data() {
        return {
            msg:"我是子组件"
        }
    },
    methods:{
        transmit:function(msg){
            this.msg = msg;
        }
    }
}
</script>

通过子组建索引的方式可以调用子组件的方法从而实现父子组件之间的通信。

3、子组件向父组件传递数据

ps:父组件：App.vue
子组件：children.vue

 App.vue
 <template>
   <div id="box">
       <children @transmit="trans"></children>
   </div>
 </template>
 <script>
 import chilaren from "children";
 export default {
     data(){
         return {
             msg:"我是父组件传递给子组件的数据"
         }
     },
     methods:{
         trans: function(msg){
             this.msg = msg;
         }
     },
     component: {
         chilaren
     }
 }
 </script>

 children.vue
 <template>
 <h1>我是子组件</h1>
 <button @clik="click"></button>
 </template>
 <script>
 export default {
     data() {
         return {
             msg:"我是子组件"
         }
     },
     methods:{
         click:function(){
             this.$emit('transmit',this.msg);
         }
     }
 }
 </script>

父组件使用自定义事件@transmit来接受子组件传递过来的数据

4、除此之外你还能想到什么方法可以实现组件之间的通信

（1）如果不同的组件生成不同的路由，且页面之间有跳转交互，那么可以通过$router.push的时候携带数据来进行通信，就像我们两个html页面通过url拼接参数实现通信是一样的；
（2）通过localStorage或者sessionStorage来存储数据；
（3）通过通过$parent,$chlidren等方法调取用层级关系的组件内的数据和方法

this.$parent.$data.id  //获取父元素data中的id
this.$children.$data.id  //获取父元素data中的id

但是这种方法用起来比较灵活，但是容易造成代码耦合性太强，导致维护困难，不建议使用。

5、复杂应用中通过vuex来实现组件之间的通信

较复杂的应用中还可以使用vuex来实现组件间的相互通信

---

关键词：vue组件之间的通信, eventBus, props， ref, 自定义事件

参考链接：
父组件与子组件的消息传递
http://blog.csdn.net/sinat_17775997/article/details/59478814
其他的组件之前通信方式
http://blog.csdn.net/qq_32786873/article/details/70844811