vue3 v-model

在vue2的时候，v-model和.sync修饰符在职能上是一样的，容易混淆，在vue3时做了统一，为此移除了.sync修饰符，以及组件内的model选项，新增了可以多个v-model的使用方式。

我们先看看vue2的v-model写法：

<ChildComponent v-model="pageTitle" />

<!-- 等同于 -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

model选项

export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    title: {
      type: String,
      default: 'Default title'
    }
  },
  methods: {
    onClick() {
      this.$emit("change", "xxx");
    }
  }
}

<ChildComponent v-model="pageTitle" />

使用.sync其实也差不多，只是不用v-model了

<ChildComponent :title.sync="pageTitle" />

export default {
  props: {
    title: {
      type: String,
      default: 'Default title'
    }
  },
  methods: {
    onClick() {
      this.$emit("update:title", "xxx");
    }
  }
}

由于职能都差不多，很容易造成使用上的混乱，或者有的人要么不使用，要么就是乱用，vue3对这个地方进行了调整。

下面是vue3的写法：

<ChildComponent v-model="pageTitle" />

<!-- 等同于: -->
<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

首先是默认绑定的值由原来的value改为modelValue，默认使用的input事件也改为update:modelValue，从这里就可以看出，其实vue3就是将model与sync进行融合了。

除了默认的用法，还可以像sync那样，实现多个model绑定，其格式如下：

v-model:propName="pageTitle"

model后面接一个参数用于表示绑定的prop值，还是很好理解的。

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

<!-- 等同于: -->
<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>

使用了参数后，会默认生成一个@update:propName的自定义事件，个人建议是这个事件自己手动在组件的emits中再声明一下。

<script>
export default {
  props: ['title', 'content'],
  emits: ['update:title', 'update:content'],
}
</script>

虽然说不声明emits也能用就是了。

input的model

上述所说的都是针对组件形式的model绑定，如果是input这些表单元素，其实还是会按照vue2的那种形式：

<input v-model="searchText" />

<!-- 等同于 -->
<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

只有在组件的时候value会被转为modelValue，事件input转为update:modelValue。

修饰符

vue2之前是无法在model绑定的时候使用自定义修饰符的，现在vue3支持了，使用方式稍微有点奇怪，但是官方文档已经有很详细的用法了，这里就自行查看文档吧！

处理v-model修饰符