v-modelv-model 在 Vue3.0中的修改。与Vue2.0中的sync方法是一致的。移除了2.0中的mod

1、

<ModalCounter v-model="counter" />

<template>
  <div @click="$emit('update:modelValue', modelValue++)">counter: {{ modelValue }}</div>
</template>

<script>
export default {
  name: 'ModelCounter',
  props: {
    modelValue: {
      type: Number,
      default: 0
    }
  }
};
</script>

<style scoped></style>

2、

<ModalCounter v-model:counter="counter" />
<!-- 等效于 -->
<ModalCounter :counter="counter" @update:counter="counter = $event" />

<template>
  <div @click="$emit('update:counter', counter++)">counter: {{ counter }}</div>
</template>

<script>
export default {
  name: 'ModelCounter',
  props: {
    counter: {
      type: Number,
      default: 0
    }
  }
};
</script>

<style scoped></style>