vue父子组件数据传输以及实现父子组件数据双向绑定

1.父传子，子接受用props

  a.父组件中要做的事情

      在父组件中引入子组件：

并在components中声明该组件

b.子组件中要做的事情

     在子组件中props的方式接受，这里有两种方法：props:['rules','model'],还有就是图片中对象的方式，只是对象的方式能够设定传值的类型。

在子组件中的使用如第二个红色的标出的部分，直接使用  this.rules

2.子传父，子用$emit（派发自定义事件）

父子组件间传值是单向数据流，即父传子，但是子不能修改被传过来的数值，如果子要修改还需通知父组件来修改（目前学到的内容来说是这样的），所以父传子的时候，是传递事件，并在父组件中调用该函数

a.父组件要做的

在父组件中引入子组件，如图所示

第二幅图，即为绑定的事件传参即为子传给父的数据

b.子组件

3.父子组件数据的双向绑定

在子中改父中也可以检测到，就像v-model一样，（v-model是value="inputvalue" @input="inputHandler"封装的语法糖）

在子组件中的设置：

此处的 :value="inputvalue" @input="inputHandler" 就是实现与父组件双向绑定的关键