vue 理解双向绑定v-model和调用组件为何要用v-mdel绑定

vue中绑定一个属性使用的是v-bind:指令，简写形式为:；使用该指令可以绑定data中的key，从而获取它对于的value值，但是这个绑定它是单向的，如果你元素本身修改了内容，并不会影响到data中对于的值。

在与表单的交互中只有单向绑定是不实用的，于是有了双向绑定，我们可以给一个input表单元素通过v-model双向绑定一个key，并且当我们修改input中的内容时，绑定的值也会跟着发生变化。

其原理也非常简单。

v-model绑定：

<input type="text" v-model="name" />

v-mode原理

<input type="text" :value="name" @input="name=$event.target.value" />

v-model实际上就做了两件事：

1. 默认绑定value属性
2. 添加input事件

当input的内容发生改变就会触发input事件，input事件再将绑定的值进行更新。

知道这两个步骤，我们就可以管中窥豹，了解到很多组件用v-model绑定数据是为什么？

组件使用v-model绑定数据

假设我们有一个子组件，名为<app-input>；它是一个用户账号的表单控件，利用v-model绑定一个name属性。

<app-input v-model="name"></app-input>

data: {
  name: ''
}

组件内部

<input type="text" :value="value" @input="setName">

props:['value'],
methods: {
  setName(e){
    this.$emit('input',e.target.value);
  }
}

组件通过props设置value接受v-model默认绑定的value属性传来的值，然后通过input事件触发setName方法，这个方法触发v-model默认绑定的input事件，并将修改的值传给它，v-model的input事件再去修改name的值。

这样就可以少些一些代码，不用每次在调用组件的html元素上写一个props，再写一个自定义事件。

以上就是关于v-model的解析。