目录

1.v-model绑定表单元素

2.v-model绑定组件

v-model绑定表单元素

直接上代码

// v-model绑定data中的数据
<input type="text" v-model="cValue">{{cValue}}
// 定义v-model的初始值
data(){
    return {
      cValue: ''
    }
  }

我们平时使用最多的就是上面这种绑定方式，那么它的原理是什么呢？请看下面的代码。

// v-bind动态绑定value的值，cValue变化时input的value也会随之变化
// @input监听表单的输入事件，每当触发时就会将当前input中的值赋给cValue
<input type="text" :value="cValue" @input="cValue = $event.target.value">{{cValue}}

以上就是input输入框使用v-model的原理，是不是相当简单。

此外，当v-model绑定到单选框或复选框上时，value改变则不会触发input事件，取而代之的是触发change事件，原理与上述相似。

我们直接使用v-model时，Vue内部会进行智能处理，判断value改变触发的事件是input还是change，这正是Vue强大之处的一个体现。

v-model绑定组件

当我们在组件上使用v-model时，会对子组件props对象中的value进行双向绑定，代码如下

// 父组件 绑定data中的数据
<HelloWorld v-model="fValue"/>

data(){
    return {
      fValue: 'HelloWorld'
    }
  }
  
// 子组件 props接受value就可以直接使用
<div>{{value}}</div>
props: ['value']
// 当需要改变value值时,只需发送input事件
this.$emit('input', newValue)

当然上面父组件中的代码也可以拆分

// $event为子组件抛出的值
<HelloWorld :value="fValue" @input="fValue = $event"/>

.sync修饰符

熟悉Vue的小伙伴到这应该就能想到.sync修饰符，它的简单使用如下

// 父组件
<HelloWorld :count.sync = "count"/>

  data(){
    return {
      count: 9
    }
  }
  
// 子组件中使用这个值和上面v-model时相同，不同的是改变绑定值的方式
<div>{{count}}</div>
props: ['count']
// 改变count的值
this.$emit('update:count', newValue)

上面的代码也可以拆分

<HelloWorld :count="count" @update:count="count = $event"/>

两者都实现了数据的双向绑定，v-model只能绑定一个值，且多用于与子组件中的表单控件进行联系，.sync修饰符可以使用多次，多用于改变父子组件内共有的状态。

总结

我们平时使用的都是它们的语法糖，但是拆分的写法在一定情况下可能会更适合。