vModel

自定义v-model

语法糖

• 2.0中的v-model由:value与@input组成
• 3.0中的v-model由:value与@update:value组成(value可以为任意值，这样就可以定义多个vModel，不需要使用.sync修饰符)

<!-- 父组件 -->
<template>
  <component v-model:customValue="value" />
</template>

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

<!-- 子组件 -->
<script>
import { defineProps, defineEmits } from 'vue'
// 通过 update:<valueKey> 实现多个vmodel
const props = defineProps<{ customValue: any }>()
const emits = defineEmits<{ (e: 'update:customValue', value: any): void }>()
</script>

defineModel

更便捷的定义vModel

vue3.3更新的语法

import { defineModel } from 'vue'

const value = defineModel<any>('value', { default: '0' })