vue2和vue3组件使用v-model

vue2

vue2组件使用v-model时相当于:value和@input，自组件通过props接收和$emit即可：

// 子组件
<template>
  <input type="text" v-model="valueC">
</template>
<script>
export default {
  props: {
    value: String,
  },
  computed: {
    valueC: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>

vue3

默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。

我们可以通过向 v-model 传递参数来修改这些名称，并且可以有多个不同名称的v-model

<user-name
  v-model:firstName="firstName"
  v-model:lastName="lastName"
></user-name>

// 子组件
<template>
  <input type="text" v-model="firstNameC">
  <input type="text" v-model="lastNameC">
</template>
<script>
export default {
  props: {
    firstName: String,
    lastName: String
  },
  emits: ['update:firstName', 'update:lastName'],
  computed: {
    firstNameC: {
      get() {
        return this.firstName
      },
      set(val) {
        this.$emit('update:firstName', val)
      }
    },
    lastNameC: {
      get() {
        return this.lastName
      },
      set(val) {
        this.$emit('update:lastName', val)
      }
    },
  }
}
</script>