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

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

情景一：

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

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

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

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

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

情景二：

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

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

看看控制台：

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：

父组件：