Vue3 中的 v-model 语法糖（三种写法）

Vue2 中的 v-model 默认解析为 :value 和 @input

Vue3 中的 v-model 默认解析为 :modelValue 和 @update:modelValue

Vue3 中的 v-model:attr 默认解析为 :attr和 @update:attr

Vue3 第一种写法  :modelValue 和 @update:modelValue

父组件：

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(10)
</script>

<template>
  <son
    :model-value="count"
    @update:modelValue="count = $event"
  ></son>
</template>

子组件：

<script setup lang="ts">
// 计数器
// 通过 v-model 解析成 modelValue @update:modelValue
defineProps<{
  modelValue: number
}>()

defineEmits<{
  (e: 'update:modelValue', count: number): void
}>()
</script>

<template>
  <div class="cp-radio-btn">
    计数器：{{ modelValue }}
    <button @click="$emit('update:modelValue', modelValue + 1)">+1</button>
  </div>
</template>

Vue3 第二种写法  v-model

父组件：

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(10)
</script>

<template>
  <son v-model="count"></son>
</template>

子组件：

<script setup lang="ts">
// 计数器
// 通过 v-model 解析成 modelValue @update:modelValue
defineProps<{
  modelValue: number
}>()

defineEmits<{
  (e: 'update:modelValue', count: number): void
}>()
</script>

<template>
  <div class="cp-radio-btn">
    计数器：{{ modelValue }}
    <button @click="$emit('update:modelValue', modelValue + 1)">+1</button>
  </div>
</template>

Vue3 第三种写法   通过v-model:count 解析成 count @update:count

父组件：

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(10)
</script>

<template>
  <son v-model:count="count"></son>
</template>

子组件：

<script setup lang="ts">
// 计数器
// 通过 v-model:count 解析成 count @update:count
defineProps<{
  count: number
}>()

defineEmits<{
  (e: 'update:count', count: number): void
}>()
</script>

<template>
  <div class="cp-radio-btn">
    计数器：{{ count }}
    <button @click="$emit('update:count', count + 1)">+1</button>
  </div>
</template>

<style lang="scss" scoped></style>