简单易懂----Vue 组件之间的通信(父到子，子到父，同级)

关于组件之间的通信主要是看业务，是父到子，还是子到父。以下的例子我会配上具体的应用情景。

情景一：

父组件传值给子组件（为了降低父组件复杂程度，往往会将表格，表单等进行组件化，抽离成单个的组件）

做法：子组件child：声明一个props属性

//对象形式
props: {
    editData: {
      type: Object
    }
 }
//字符串数组形式
props: ['rowData']

父组件：绑定子组件声明的那个属性

 <edit-manage :editData="manageEditData" ref="editProxy"></edit-manage>
 <eye-manage :rowData="eyeData"></eye-manage>

manageEditData 和 eyeData都是父组件data里的变量，这样我们就完成了父组件到子组件的传值。注意：这种传值方式的单向的，当父组件的数据变化会更新prop属性，完成数据的更新。

情景二：

子组件向父组件传值（子组件如果包含表单等需要填写的数据，在父组件中的提交操作需要其作为参数传递到后台）

做法一：
父组件直接取值：父组件通过this.$ref来获取子组件的数据
在父组件中引入子组件，通过给子组件添加ref属性，利用this.$ref对象来获取子组件的值，下面来一个demo看看这个this.$ref打印出来会是什么样子

<template>
  <div class="hello">
    <child ref="child"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  components: {
    child
  },
  mounted () {
     console.log(this.$refs)
  }
}
</script>
<style lang="stylus" scoped>
</style>

看看控制台：

image.png
如果我们需要获取child子组件form表单的值，可以通过this.$ref['child']来获取child子组件data的任意值，来看看代码和控制台：

 mounted () {
    console.log(this.$refs['child'].child.name)
    console.log(this.$refs['child'].child.age)
  }

页面上的输入框：

image.png

控制台：

image.png

这样我们就可以获取到了

做法二：通过$emit()和v-on

先来看子组件child：

<template>
  <div>
    <button @click="save">保存</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      child:{
          name:'childname',
          age:11
      }
    }
  },
  methods:{
   save(){
       this.$emit('saveHandle',[this.child,1,2,3,4]) //传递一个数组
   }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
</style>

父组件：

<template>
  <div>
    <child ref="child" v-on:saveHandle="save"></child>
  </div>
<template>
<script>
import child from './child'
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  components: {
    child
  },
  methods:{
    save(data){
      console.table(data) //接收子组件child传过来的数据
    }
  }
}
</script>

看看控制台：

image.png

获取到子组件传递的值了就可以为所欲为了