Vue 的双向绑定原理与用法揭秘

本文实例讲述了Vue 的双向绑定原理与用法。分享给大家供大家参考，具体如下：

Vue 中需要输入什么内容的时候，自然会想到使用

<input v-model="xxx" />

的方式来实现双向绑定。下面是一个最简单的示例

<div id="app">
  <h2>What's your name:</h2>
  <input v-model="name" />
  <div>Hello {{ name }}</div>
</div>

new Vue({
  el: "#app",
  data: {
      name: ""
  }
});

在这个示例的输入框中输入的内容，会随后呈现出来。这是 Vue 原生对

<input>

的良好支持，也是一个父组件和子组件之间进行双向数据传递的典型示例。不过

v-model

是 Vue 2.2.0 才加入的一个新功能，在此之前，Vue 只支持单向数据流。

Vue 的单向数据流

Vue 的单向数据流和 React 相似，父组件可以通过设置子组件的属性（Props）来向子组件传递数据，而父组件想获得子组件的数据，得向子组件注册事件，在子组件高兴的时候触发这个事件把数据传递出来。一句话总结起来就是，Props 向下传递数据，事件向上传递数据。

上面那个例子，如果不使用

v-model

，它应该是这样的

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

由于事件处理写成了内联模式，所以脚本部分不需要修改。但是多数情况下，事件一般都会定义成一个方法，代码就会复杂得多

<input :value="name" @input="updateName" />

new Vue({
  // ....
  methods: {
    updateName(e) {
      this.name = e.target.value;
    }
  }
})

从上面的示例来看

v-model

节约了不少代码，最重要的是可以少定义一个事件处理函数。所以

v-model

实际干的事件包括

使用

v-bind

（即

:

）单向绑定一个属性（示例：

:value="name"

）
绑定

input

事件（即

@input

）到一个默认实现的事件处理函数（示例：

@input=updateName

这个默认的事件处理函数会根据事件对象带入的值来修改被绑定的数据（示例：