Vue父子组件通信和双向绑定

本篇文章主要介绍父子组件传值，组件的数据双向绑定。

1. 基础父子组件传值

父子组件传值，这是Vue组件传值最常见，最基础的传值方法。
父组件向子组件传值使用Props,子组件定义期望接收传值的名字、类型、默认值等等，父组件Props值的改变会自动同步到子组件。
子组件向父组件传值使用事件触发,即使用$emit注册事件，在父组件触发，这个事件可以携带值，而且一个事件的触发本身就是在传递信息。
代码实现：

//父组件

//子组件
 

1.gif

由于父组件的Props改变会自动传递到子组件，所以会同步变化。

2. 父子组件传值的双向绑定

上述例子有点双向绑定的意思，但这并不是双向绑定，Vue的数据都是单向流动的，而且Vue中从来就没有任何的双向绑定，那些双向绑定只是语法糖而已。
我们都知道v-model可以用在 input标签上，实现双向绑定，其实Vue已经把input标签进行了修改，也就是 input标签已经是一个Vue的内置组件了，同样的内置组件还有很多，比如，用于缓存的keep-alive,用于路由链接的router-like，用于路由视图展示的router-view等等。
实现一个自定组件的v-model之前，我们先实现一个双向绑定，代码如下：

//Com1

//Com2

2.gif

我们没用Vue的v-model同样可以实现数据的双向绑定。我们如何改造成v-model呢？只能改变父组件Com1，子组件不能更改，代码如下：

//Com1

3.gif

由此我们实现了Com2这个组件的v-model,改变的是取消了Com2的事件监听@input，Propsvalue，换来了v-model，这个简化的过程就是语法糖。v-model会自动处理那些注释掉的操作，即v-model会自动处理一个组件的input事件和valueProps，让两者绑定。
input的v-model已经实现，我们来说一说自定义组件的v-model，v-model会检测组件的input事件和valueProps，这显然是不行的，自定义组件需要的不一定是这两个东西,幸好子组件里还有一个属性mode，可以用来改变v-model默认监听的Props和event，代码如下：

export default {
  name: 'Com2',
  model: {
    //默认监听的事件和prop
    // event: 'input',
    // prop: 'value',
    //自定义的监听子组件触发事件和传进去的prop
    event: 'change',
    prop: 'datas'
  },
  //其他代码
}

这时在父组件使用子组件的时候，在子组件使用v-model就会自动处理change事件和datasProps，这样就可以随意定义想要的双向绑定属性了，但是一个组件只能有一个v-model。
在Vue 2.3.0 中加入了.sync 修饰符，也是用来处理双向绑定的，封装流程和v-model类似，在子组件需要这样操作，代码如下：

//在需注册事件的地方这样写
this.$emit('update:datas', newDatas)
//在父组件调用这个子组件的时候这样写

//使用.sync 修饰符简化为

//子组件的事件注册不改动

这样同样可以实现双向绑定，一个组件可以有多个.sync修饰符双向绑定。