feat:整理博客目录结构

docs/Web/Vue/Vue3-DefineModel.md

@@ -0,0 +1,93 @@
+---
+  title: Vue3 defineModel
+  date: 2026-06-05
+---
+
+# 一、概念
+  defineModel是对 props + emit的语法糖，返回一个可写的 ref。Vu3.4开始支持。   
+  之前的做法：  
+```ts
+// 子组件
+const props = defineProps({
+  modelValue: Number
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+function increment() {
+  emit('update:modelValue', props.modelValue + 1)
+}
+```
+
+  现在做法：  
+```ts
+const model = defineModel()
+```
+
+# 二、简单示例
+  父组件：  
+```vue
+<script setup>
+import Stepper from './Stepper.vue'
+import { ref } from 'vue'
+
+const quantity = ref(1)
+</script>
+
+<template>
+  <div>
+    <p>购买数量：{{ quantity }}</p>
+    <Stepper v-model="quantity" />
+  </div>
+</template>
+```
+
+&emsp;&emsp;子组件：     
+```vue
+<script setup>
+const model = defineModel({
+  type: Number,
+  default: 1
+})
+</script>
+
+<template>
+  <button @click="quantity--">−</button>
+  <span>{{ quantity }}</span>
+  <button @click="quantity++">+</button>
+</template>
+```
+
+&emsp;&emsp;和`defineProps`定义类似，可以指定类型和默认值。   
+
+# 三、多个v-model
+&emsp;&emsp;父组件：  
+```vue
+<UserForm
+  v-model:name="form.name"
+  v-model:age="form.age"
+/>
+```
+
+&emsp;&emsp;子组件：  
+```vue
+<script setup lang="ts">
+const name = defineModel<string>('name', {
+  default: ''
+})
+
+const age = defineModel<number>('age', {
+  default: 0
+})
+</script>
+
+<template>
+  <input v-model="name" placeholder="姓名" />
+  <input v-model="age" type="number" placeholder="年龄" />
+</template>
+```
+
+::: tip
+defineProps: 只读，不能改   
+defineModel: 可写
+:::