vue2.x 父子组件间的各种通信方法

父子组件（或者更深层）和兄弟组件间的通信是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修饰符

这种方法是props传参的延伸，有些时候我们可能需要对一个 prop 进行“双向绑定”。可能需要修改父组件通过props传进来的参数，但是直接改肯定会报错，这个时候就可以用.sync修饰符，也类似于上一种方法。

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

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

<!--子组件-->
<template>
  <div class="childOne">
    <span @click="emitEvent">点击更新父组件数据</span>
  </div>
</template>

<script>
  export default {
    name: 'childOne',
    props: {
      obj: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    data () {
      return {
        childData: {
          text: 'childMessage'
        }
      }
    },
    methods: {
      emitEvent () {
        this.$emit('update:obj', this.childData)
      }
    }
  }
</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() // call by parent
        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￣）づ╭❤～