From 288f7bfa3a9334c716ad5cb1a1258bcddc9a1708 Mon Sep 17 00:00:00 2001
From: DY_XiaoDong <xiaodong@indouyin.cn>
Date: Wed, 1 May 2024 18:36:36 +0800
Subject: [PATCH] docs: add docs for v-model `update:*` event (#2839)

docs: add docs for v-model update:* event
---
 src/guide/components/v-model.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/guide/components/v-model.md b/src/guide/components/v-model.md
index 52e4273849..47704e7737 100644
--- a/src/guide/components/v-model.md
+++ b/src/guide/components/v-model.md
@@ -59,6 +59,7 @@ const model = defineModel()
 This is how you would implement the same child component shown above prior to 3.4:
 
 ```vue
+<!-- Child.vue -->
 <script setup>
 const props = defineProps(['modelValue'])
 const emit = defineEmits(['update:modelValue'])
@@ -72,6 +73,16 @@ const emit = defineEmits(['update:modelValue'])
 </template>
 ```
 
+Then, `v-model="modelValue"` in the parent component will be compiled to:
+
+```vue-html
+<!-- Parent.vue -->
+<Child
+  :modelValue="foo"
+  @update:modelValue="$event => (foo = $event)"
+/>
+```
+
 As you can see, it is quite a bit more verbose. However, it is helpful to understand what is happening under the hood.
 
 Because `defineModel` declares a prop, you can therefore declare the underlying prop's options by passing it to `defineModel`: