Vue2子组件怎么绑定v-model实现父子组件通信

前言

v-model 可以在组件上使用以实现双向绑定。

首先让我们回忆一下 v-model 在原生元素上的用法：

在代码背后，模板编译器会对 v-model 进行更冗长的等价展开。因此上面的代码其实等价于下面这段：

默认用法

父组件

子组件

以上就可以实现 父子组件的双向绑定



.sync写法

传参的时候加上 .sync 会简化上面的写法，父组件不需要定义更新触发函数（update）

会被扩展为：

 first = val">

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

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

父组件

子组件

以上也可以实现 父子组件的双向绑定



绑定单个 v-model

当使用在一个组件上时，v-model 会被展开为如下的形式：

父组件

子组件

现在可以实现单个 输入框绑定