Vue之父子、同级组件的通信详解

在组件的通信上vue2.0弃用1.0中$dispatch和$broadcast的原因在于依赖组件树结构的事件流，当组件树变得很大时很难推理（简单地说：它不能在大型应用很好地扩展，我们不希望以后给你设置痛点）。$dispatch和$broadcast不能解决同级组件之间的通信。
2.0中有两种方法可以完成组件直接的通信，一种是vuex，适合大型项目的组件管理(比较复杂暂不写，以后会详解)。另一种是event.bus，这种方法适合不算特别复杂的组件管理，这里详解一下怎么用：
新建目录文件–>src/components/eventBus/eventBus.js，代码：

import Vue from 'vue';
export default new Vue();

组件中引用：

import bus from '@/components/eventBus/eventBus';

下面介绍父组件与子组件、子组件与父组件、同级组件之间的通信方式：
一，子组件–>父组件，传递参数触发父组件的方法、子组件方法让父组件调用，同级组件通信与子组件–>父组件用法的方法一致。
1，子组件中传递参数触发父组件方法，可以将当前属性当做参数传到父组件，比如传当前的元素element：
（1）首先由子组件触发当前元素：
子组件children模板：

<div @cart-add="cartAdd"></div>

子组件js：

import bus from '@/components/eventBus/eventBus';
export default {
  cartAdd () {
    bus.$emit('cart-add', event.target);
  }
};

（2）父组件parent模板在钩子函数中接收属性
父组件模板：

<div>
  <children @cart-add="cartAdd"></children>
</div>

父组件js：

import bus from '@/components/eventBus/eventBus';
export default {
  created () {
   bus.$on('cart-add', (el) => {});
 }
};

2，子组件方法让父组件调用
这里借用ref、refs的方法，子组件js：

export default {
  methods: {
   drop () {
   }
 }
};

父组件模板：

<div>
  <div @click="btn"></div>
  <children ref=cartAdd></children>
</div>

父组件js：

export default {
  methods: {
   btn () {
     this.$refs.cartAdd.drop();
   }
 }
};

二，父组件–>子组件传值

父组件模板中绑定参数：

<div>
  <children :parentData="datas"></children>
</div>

子组件接收数据,在模板中就可以调用父组件里的数据
子组件模板：

<div>{{parentData.name}}</div>

export default {
  props: {
     parentData: {
      type: Object    
    }
  }
};

三、兄弟组件通信
与子组件–>父组件的传递参数触发方法一致，在children1中$emit传递属性，在children2中$on接收属性触发方法。