双向绑定和v-model

v-model的简介

v-model是一个指令，限制在<input>、<select>、<textarea>、components中使用，实现数据-视图、视图-数据的双向绑定。

v-model的使用以及实例体现v-model的双向绑定

<template>
  <div class="hello">
    <input v-model="inputData" />
    <p>输入的内容为：{{ inputData }}</p>
    <button @click="changeInputData">点击</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      inputData: "",
    };
  },
  methods: {
    changeInputData() {
      this.inputData = this.inputData + "a";
    },
  },
};
</script>
<style scoped>
</style>

当在输入框中输入内容时，会引起下面内容（inputData）的变化；当点击按钮改变 inputData的变化时，输入框中的内容也会发生变化，这就是双向绑定。

v-model的原理

v-model指令其实是v-bind和v-on指令的结合。

可以用v-bind和v-on指令实现跟v-model一样的效果：

<template>
  <div class="hello">
    <div>
      <h3>使用v-model</h3>
      <input v-model="inputData" />
      <p>输入的内容为：{{ inputData }}</p>
      <button @click="changeInputData">点击</button>
    </div>

    <div>
      <h3>使用v-bind和v-on指令实现v-model的效果</h3>
      <input type="text" v-bind:value="inputData2" v-on:input="onChange" />
      <p>输入的内容为：{{ inputData2 }}</p>
      <button @click="changeInputData2">点击</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      inputData: "",
      inputData2: "",
    };
  },
  methods: {
    changeInputData() {
      this.inputData = this.inputData + "a";
    },
    onChange(e) {
      this.inputData2 = e.target.value;
    },
    changeInputData2() {
      this.inputData2 = this.inputData2 + "a";
    },
  },
};
</script>
<style scoped>
</style>

在输入框中输入内容，下面的内容也会跟着发生变化，点击按钮修改inputData2的值，输入框的内容也会跟随改变，所以也实现了双向绑定。

v-model作用在组件上

v-model绑定在组件上就是当v-model绑定的变量发生改变时，能影响组件的状态或者行为（数据→视图）；当组件内部的状态或行为发生改变时，能够影响v-model绑定的变量（视图→数据）

下面是一个示例：

父组件：

<template>
  <div>
    <InputComp v-model="data"></InputComp>
    <div>子组件中input的内容：{{ data }}</div>
    <button @click="changeData">按钮</button>
  </div>
</template>
<script>
import InputComp from "./InputComp.vue";
export default {
  name: "ModelDemo",
  components: {
    InputComp,
  },
  data() {
    return {
      data: "",
    };
  },
  methods: {
    changeData() {
      console.log("点击了按钮");
      this.data = `${this.data}a`;
    },
  },
};
</script>

子组件：

<template>
  <div>
    <input v-bind:value="value" v-on:input="dealInputEvent" />
  </div>
</template>

<script>
export default {
  name: "InputComp",
  props: ["value"],
  methods: {
    dealInputEvent(e) {
      // 子组件向父组件派发input事件，并将子组件中input的输入内容传递给父组件
      this.$emit("input", e.target.value);
    },
  },
};
</script>

有两点需要说明：

1、为什么子组件中的props接收了value值？2、为什么子组件中能向父组件派发input事件？代码中我们并没有显式定义value和input，为什么可以直接用呢？

要理解这两点内容，可以从上面v-model的原理寻找答案。v-model的原理是v-bind:value和v-on:input（或者v-on:change）的组合。所以上面的例子中在使用v-model时，其实就是向子组件传递了value和input，所以在子组件中可以使用。

这样，当在子组件的输入框中输入内容时 ，会引起父组件中data变量的变化；

当点击按钮修改父组件中data的值时，也会引起子组件中input输入内容的变化。所以组件通过v-model 实现了双向绑定。

总结：v-model作用在组件上，

1、首先需要子组件接收父组件传递的value参数，并绑定在某个元素上。

2、在某个条件下，子组件向父组件派发input事件，并携带最新的值

3、父组件自动监听input事件，并吧接收到的最新值同步给v-model绑定的变量。