父子组件（或者更深层）和兄弟组件间的通信是vuejs开发中非常重要的一部分，下面列举一些通信的方法。

父传子

通过props传递

这种做法是最常见也是最通用的做法，优点就是简单，数据流单向、清晰；但是如果遇到深层次传递就很难受了，会造成维护上的困难。

<!--父组件-->
<template>
  <div class="parent">
    <!--如果传递的参数是字符串，可以不加冒号-->
    <child-one :obj="dataObj"></child-one>
  </div>
</template>
<script>
  import childOne from './childOne'
  export default {
    name: 'parent',
    components: {
      childOne
    },
    data () {
      return {
        dataObj: {
          text: 'message'
        }
      }
    }
  }
</script>

<!--子组件-->
<template>
  <div class="childOne">
    <span>{{obj.text}}</span>
  </div>
</template>

<script>
  export default {
    name: 'childOne',
    props: {
      obj: {
        type: Object,
        default () {
          return {}
        }
      }
    }
  }
</script>

依赖注入provide/inject

然而，依赖注入还是有负面影响的。它将你的应用以目前的组件组织方式耦合了起来，使重构变得更加困难。同时所提供的属性是非响应式的。这是出于设计的考虑，因为使用它们来创建一个中心化规模化的数据跟使用 $root做这件事都是不够好的。如果你想要共享的这个属性是你的应用特有的，而不是通用化的，或者如果你想在祖先组件中更新所提供的数据，那么这意味着你可能需要换用一个像 Vuex 这样真正的状态管理方案了。（摘自vue文档）

这种写法，只要是parent的后代组件就可以通过inject的方式获取到parent传递的参数。这里需要注意的是，通过provide传递的参数是非响应式的，但是如果你传的的是一个可监听的对象，那么其对象的属性还是可响应的。
文中说的耦合我的理解就是，如果你的子组件用了inject依赖了parent的数据和方法，那这个子组件就只能作为parent的后代元素；要是你想把这个子组件用在其他地方就获取不到依赖的数据和方法了。所以这种通信方法的使用情景比较有限。

<!--父组件-->
<template>
  <div class="parent">
    <child-one></child-one>
  </div>
</template>
<script>
  import childOne from './childOne'
  export default {
    name: 'parent',
    components: {
      childOne
    },
    provide () {
      return {
        parentCom: this
      }
    },
    data () {
      return {
        dataObj: {
          text: 'message'
        }
      }
    }
  }
</script>

<!--子组件1-->
<template>
  <div class="childOne">
    <span>{{parentCom.dataObj.text}}</span>
    <child-two></child-two>
  </div>
</template>

<script>
  import childTwo from './childTwo'
  export default {
    name: 'childOne',
    components: {
      childTwo
    },
    inject: ['parentCom']
  }
</script>

<!--子组件2-->
<template>
  <div class="childTwo">
    <span>{{parentCom.dataObj.text}}</span>
  </div>
</template>

<script>
  export default {
    name: 'childTwo',
    inject: ['parentCom']
  }
</script>

$parent

这种方法其实并不属于数据的传递而是一种主动的查找，而且耦合的比上一种方法还要厉害，因为这个$parent只能取到当前父组件的数据，一旦这个组件放在别的页面用，就可能会出现取不到数据等问题，所以不推荐使用。

<!--父组件-->
<template>
  <div class="parent">
    <child-one></child-one>
  </div>
</template>
<script>
  import childOne from './childOne'
  export default {
    name: 'parent',
    components: {
      childOne
    },
    data () {
      return {
        dataObj: {
          text: 'message'
        }
      }
    }
  }
</script>

<!--子组件-->
<template>
  <div class="childOne">
    <span>{{text}}</span>
  </div>
</template>

<script>
  export default {
    name: 'childOne',
    computed: {
      text () {
        return this.$parent.dataObj.text
      }
    }
  }
</script>

子传父

$emit事件

这种方法是最常用的子传父的方法

<!--父组件-->
<template>
  <div class="parent">
    <child-one @handle-click="handleClick"></child-one>
  </div>
</template>

<script>
  import childOne from './childOne'
  export default {
    name: 'parent',
    components: {
      childOne
    },
    methods: {
      handleClick (val) {
        console.log(val) // childMessage
      }
    }
  }
</script>

<!--子组件-->
<template>
  <div class="childOne">
    <span @click="emitEvent">点击传参</span>
  </div>
</template>

<script>
  export default {
    name: 'childOne',
    data () {
      return {
        childData: 'childMessage'
      }
    },
    methods: {
      emitEvent () {
        this.$emit('handle-click', this.childData)
      }
    }
  }
</script>

.sync修饰符 官方文档传送门

有些时候我们可能需要对一个 prop 进行“双向绑定”，也就是父组件通过props给子组件传递一个默认参数，子组件改变数据后通过$emit回传给父组件，这个时候就可以用.sync修饰符简化操作。如果有需要也可以写成v-model的形式，可以参考vue组件兼容v-model（下面的例子显然更适合用v-model）

注意：子组件中不能直接修改父组件通过props传进来的参数，否则会报错
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

所以当数据变更的时候：
1、直接把变更后的数据回传 this.$emit('update:data', newData)
2、或者一定要把数据先缓存下来的时候，就在子组件的data中重新定义一个字段（比如childData），然后等你想更新父组件数据的时候再 this.$emit('update:data', this.childData)

<!--父组件-->
<template>
  <div class="parent">
    <child-one :data.sync="selection"></child-one>
    <span>{{selection}}</span>
  </div>
</template>

<script>
  import childOne from './childOne'
  export default {
    name: 'parent',
    components: {
      childOne
    },
    data () {
      return {
        selection: '2'
      }
    }
  }
</script>

<!--子组件-->
<template>
  <div class="childOne">
    <select :value="data" @change="change">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
</template>

<script>
  export default {
    name: 'childOne',
    props: {
      data: {
        type: [String, Number],
        default: ''
      }
    },
    data () {
      return {
      }
    },
    methods: {
      change (e) {
        let value = e.target.value
        this.$emit('update:data', value)
      }
    }
  }
</script>

$refs

这个方法一般是用来调用子组件中的方法，很少用来取数据

<!--父组件-->
<template>
  <div class="parent">
    <child-one ref="childOne"></child-one>
    <button @click="getChild">getChild</button>
  </div>
</template>

<script>
  import childOne from './childOne'
  export default {
    name: 'parent',
    components: {
      childOne
    },
    methods: {
      getChild () {
        this.$refs.childOne.doSomething()
        console.log(this.$refs.childOne.childData.text) // childMessage
      }
    }
  }
</script>

<!--子组件-->
<template>
  <div class="childOne">
  </div>
</template>

<script>
  export default {
    name: 'childOne',
    data () {
      return {
        childData: {
          text: 'childMessage'
        }
      }
    },
    methods: {
      doSomething () {
        console.log('call by parent')
      }
    }
  }
</script>

兄弟组件通信

eventBus

eventBus可以用于随意关系的组件通信，实际上就是维护一个vue实例作为载体，只需要确保组件间使用的是同一个实例就可以实现通信；比如你可以把vue实例挂载到window对象上，或新建一个js文件export一个vue实例，有组件使用的时候import进来。

src/common/eventBus.js

import Vue from 'vue'

const eventBus = new Vue()

export default eventBus

<!--子组件1-->
<template>
  <div class="childOne">
    <span @click="emitEvent">点击发送事件</span>
  </div>
</template>

<script>
  import eventBus from '@/common/eventBus'
  export default {
    name: 'childOne',
    data () {
      return {
        childData: {
          text: 'child1Message'
        }
      }
    },
    methods: {
      emitEvent () {
        // 发送事件
        eventBus.$emit('clickEvent', this.childData.text)
      }
    }
  }
</script>

<!--子组件2-->
<template>
  <div class="childTwo">
    <span>子组件2</span>
  </div>
</template>

<script>
  import eventBus from '@/common/eventBus'
  export default {
    name: 'childTwo',
    data () {
      return {}
    },
    mounted () {
      // 这里不限于childTwo接收事件
      // 凡是import了相同eventBus并监听了clickEvent的组件都能接收到该事件
      eventBus.$on('clickEvent', (val) => {
        console.log(val)
      })
    }
  }
</script>

store 模式

还有一个“简版的vuex”，官网已经很详细了，点击蓝字飞机票

终极解决方案vuex

如果普通的解决方案真的满足不了需求，那就上vuex吧（づ￣3￣）づ╭❤～