Vue 3.0中的v-model指令的基本用法，相比于2.0版本，变化比较大，本文通过具体实例，帮助大家彻底搞懂。

单个v-model的绑定

实例中，我们定义一个BasicInput组件，组件中包含一个textbox和一个p标签。b标签同步显示输入框中的内容。BasicInput组件可以接收一个字符串作为初始值。代码如下：

<template>
  <div>
    <input type="text" :value="modelValue" @input="handleInput" />
    <p>{{modelValue}}</p>
  </div>
</template>

<script>
export default {
  props: { modelValue: String },
  name: "BasicInput",
  setup(props, ctx) {
    const handleInput = e => {
      ctx.emit("update:modelValue", e.target.value);
    };
    return { handleInput };
  }
};
</script>

• 接收用户输入的属性改为modelValue，3.0中不再使用value属性接收输入值。
• 子组件提交给父组件的事件类型为update:modelValue，不再使用input事件。

调用该组件的代码如下：

<template>
  <div>
    <basic-input :modelValue="msg" @update:modelValue="changeValue($event)" />
     <basic-input v-model="msg" />
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "Home",
  components: {},
  setup() {
    const msg = ref("abc");
    const changeValue = e => {
      msg.value = e;
    };
    return { msg };
  }
};
</script>

• 父组件中定义的接收输入值的属性同样改为modelValue
• 父组件中接收子组件传递过来的事件同样改为update:modelValue
• v-model依旧作为:modelValue和@update:modelValue的语法糖
• 如果要实现p标签和输入框的联动，需要定义响应式数据，本例子使用Vue 3.0的ref composition API定义响应式数据msg。

多个v-model的绑定

实例中，我们定义一个BasicMultiInput组件，组件中包含两个textbox和一个p标签。b标签同步显示输入框中的内容。BasicInput组件可以接收一个字符串作为初始值。代码如下：

<template>
  <div>
    <input type="text" :value="firstname" @input="handleInputFirstName" />
    <input type="text" :value="lastname" @input="handleInputLastName" />
    <p>{{firstname + " " + lastname}}</p>
  </div>
</template>

<script>
export default {
  props: { firstname: String, lastname: String },
  name: "BasicMultiInput",
  setup(props, ctx) {
    const handleInputFirstName = e => {
      ctx.emit("update:firstname", e.target.value);
    };
    const handleInputLastName = e => {
      ctx.emit("update:lastname", e.target.value);
    };
    return { handleInputLastName, handleInputFirstName };
  }
};
</script>

• 多个v-model，可以在组件中直接将自定义属性值绑定到输入框的value属性上。
• 传递给父组件的事件同样为update: 加上具体属性名。

调用该组件的代码如下：

<template>
  <div>
    <basic-multi-input v-model:firstname="firstname" v-model:lastname="lastname" />
    <basic-multi-input
      :firstname="firstname"
      :lastname="lastname"
      @update:firstname="changeNameValue($event)"
      @update:lastname="lastname=$event"
    />
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "Home",
  components: {},
  setup() {
    const changeNameValue = e => {
      firstname.value = e;
    };
    const firstname = ref("Tom");
    const lastname = ref("Green");
    return {
      changeNameValue,
      firstname,
      lastname,
    };
  }
};
</script>

• 父组件中定义的接收输入值的方法同样是update:加上属性名
• v-model依旧作为:XXX和@update:XXX的语法糖
• 如果要实现p标签和输入框的联动，需要定义响应式数据，本例子使用Vue 3.0的ref composition API定义响应式数据firstname和lastname。
• 对于ref函数定义的响应式数据，如果在代码段使用需要通过value属性获取或修改响应式数据的内容。如果在视图绑定中，则直接使用setup函数返回的响应式数据即可，不需要通过value属性访问。