【VUE】defineModel和defineEmits详解及使用场景

defineModel 和 defineEmits 是 Vue 3 的 <script setup> 语法糖，用于简化 组件双向数据绑定（v-model） 和 事件通信（emits） 的声明。

---

1. defineModel（Vue 3.4+ 新增）

作用：

• 用于声明一个 双向绑定的 prop，相当于 v-model 的语法糖。
• 替代传统的 props + emit('update:xxx') 写法，让代码更简洁。

语法：

const modelValue = defineModel("propName", { default: defaultValue })

• propName：绑定的 prop 名称（默认是 "modelValue"）。
• default：默认值（类似 props 的 default）。

使用场景：

• 父组件 使用 v-model 绑定数据，子组件 修改该数据时自动同步到父组件。

示例：

<!-- 父组件 -->
<Child v-model="name" />
<!-- 或自定义 prop 名 -->
<Child v-model:username="name" />

<!-- 子组件 -->
<script setup>
// 默认绑定 `modelValue`
const modelValue = defineModel() // 相当于 `props.modelValue` + `emit('update:modelValue')`

// 自定义 prop 名（如 `username`）
const username = defineModel("username", { default: "Guest" })

// 修改数据会自动触发父组件的更新
username.value = "Alice"
</script>

---

2. defineEmits

作用：

• 用于声明组件可以触发哪些 自定义事件。
• 替代 Vue 2 的 this.$emit() 和 Vue 3 的 emits 选项。

语法：

const emit = defineEmits(["event1", "event2"])

• 传入一个事件名数组，返回一个 emit 函数。

使用场景：

• 子组件需要通知父组件某些行为（如提交表单、关闭弹窗等）。

示例：

<!-- 子组件 -->
<script setup>
const emit = defineEmits(["submit", "cancel"])

function handleSubmit() {
  emit("submit", { data: 123 }) // 触发父组件的 @submit
}

function handleCancel() {
  emit("cancel") // 触发父组件的 @cancel
}
</script>

<!-- 父组件 -->
<Child @submit="onSubmit" @cancel="onCancel" />

---

总结

方法	作用	适用场景
defineModel	双向绑定 prop	替代 props + emit('update:xxx')
defineEmits	声明自定义事件	子组件向父组件通信

• defineModel 适用于需要 父子组件数据同步 的场景（如表单输入、开关状态）。
• defineEmits 适用于 子组件通知父组件 的场景（如提交、取消、关闭）。