3分钟带你快速认识Vue3中的v-model

Vue3中的v-model相比Vue2版本有了一些改动，新版本中v-model被封装成一个Directive，这个Directive能够更好的协调子组件之间双向绑定的问题。

什么是v-model

v-model指令的职责是在表单元素和组件上创建双向绑定。在Vue2版本中，v-model只能对表单元素进行使用。而在Vue3版本中，v-model不仅可以对表单元素进行使用，还可以对组件上进行使用。

v-model主要用于处理数据的双向绑定问题，当我们对v-model进行修改时，对应的数据也会同步修改。

在表单元素上使用v-model

示例1

<template>
  <div>
    <input v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    }
  }
}
</script>

在上面的示例中，我们使用了一个<input>元素，这个元素的v-model属性和message数据绑定起来了。当我们在输入框输入内容时，页面上的{{ message }}也会实时更新。

在自定义组件上使用v-model

示例2

<template>
  <div>
    <input :value="value" @input="$emit('update:value', $event.target.value)">
    <p>{{ value }}</p>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
  }
}
</script>

在组件中使用v-model需要注意几个问题：

1. 组件必须要定义一个value的prop属性，代表了v-model绑定的值。
2. 使用$emit方法来触发update:value事件，把输入的值传递给父组件。
3. 父组件使用v-model来给自定义组件绑定值，v-model的值为父组件中的数据。

<template>
  <div>
    <MyComponent v-model="message"></MyComponent>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      message: '',
    }
  },
}
</script>

在父组件中，我们可以使用v-model来给自定义组件绑定数据。这样，在MyComponent中输入的值也会实时同步到父级中的message数据中。

总结

在Vue3中的v-model能够更好的协调子组件之间双向绑定的问题。使用v-model可以减少我们手动去处理数据的代码量，并且能让我们更加专注于业务逻辑的处理。