Vue 3 defineModel: 简化组件的双向绑定

1. 引言

在 Vue 3.4 版本中,引入了一个新的组合式 API 函数 defineModel。这个函数大大简化了自定义组件中实现 v-model 的过程,使得创建具有双向绑定功能的组件变得更加直观和简洁。
^{_{© ivwdcwso (ID: u012172506)}}

2. defineModel 的基本概念

defineModel 是一个宏,它简化了在组件中创建可以与 v-model 一起使用的 prop。它本质上是一个语法糖,帮助我们自动创建一个 prop 和一个更新该 prop 的事件。

3. 基本用法

3.1 不使用 defineModel 的传统方式

传统上,要在组件中实现 v-model,我们需要定义一个 prop 和一个更新事件:

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])const value = computed