vue中v-model父子组件通信

有这样的需求，父组件绑定v-model，子组件输入更改父组件v-model绑定的数值。是怎么实现的呢？

实际上v-model 只是语法糖而已。

实际上他们是一样的。

举个例子，父组件代码：

子组件代码如下：

以上，就实现了子组件修改父组件v-model绑定的值。

它的原理是

1.展示：父组件v-model，子组件接收一个props值value，将它展示到子组件自己的input上。

2.改变：当子组件自身发生改变时，触发自身的input方法，然后触发父组件的事件方法，改变父组件的value，进而改变接收的props，实现自身展示的改变

例子中使用了model,官网是这样说的，实际上是为了单选框,复选框按钮等情况的时候，他们的值并不是value，而是checked,这种情况下，就需要写这个。例如：

model: {
    prop: 'checked',
    event: 'change'
  },

另外还有个 

同步修饰符sync

所以当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

this.$emit('update:foo', newValue)

好了，就这么多，记录一下。

转载：vue中v-model父子组件通信 - 来亦何哀 - 博客园 (cnblogs.com)https://www.cnblogs.com/wangxi01/p/11178243.html