vue3 多个v-model

如何处理？

对于 Vue 3 中多个 v-model 的情况，可以通过自定义指令的方式来处理。例如，可以定义一个 v-models 指令来实现：

const vModels = {
  beforeMount(el, binding, vnode) {
    const models = binding.value
    Object.keys(models).forEach(key => {
      vnode.context.$watch(models[key], (newVal) => {
        vnode.context[key] = newVal
      })
    })
  },
  updated(el, binding, vnode) {
    const models = binding.value
    Object.keys(models).forEach(key => {
      vnode.context.$watch(models[key], (newVal) => {
        vnode.context[key] = newVal
      })
    })
  }
}

app.directive('models', vModels)

然后在模板中使用 v-models 指令来实现多个 v-model：

<template>
  <div v-models="{name: nameValue, age: ageValue}">
    <input v-model="nameValue">
    <input v-model="ageValue">
  </div>
</template>

这样就可以同时处理多个 v-model，并且每个 v-model 的数据都可以实时更新。