Vue defineModel 与 props/emit 选择
Vue 中什么时候适合用 defineModel，什么时候更适合显式使用 props/emit，以及它们的接口边界差异。
#tech / dev / frame
#resource / vue3
#type / synthesis
#status / growing
[!info] related notes
Vue defineModel 与 props/emit 选择
defineModel 和显式 props/emit 的关系，真正值得讲的不是“哪个新”，而是“什么时候这个接口语义已经明确到值得用双向绑定入口，什么时候还应该保持显式通信”。
一句话定义
当组件接口本质上就是标准的值输入 + 更新通知通道时，defineModel 会更直接；当组件通信语义更复杂、事件含义更多、接口需要保持显式时，通常更适合继续使用 props/emit。
为什么这页值得单独拆
defineModel很容易被过度使用props/emit又容易被说成“老写法”而被低估- 但两者本质上解决的是不同清晰度级别的接口表达问题
什么时候更适合 defineModel
- 组件就是在承接标准表单值
- 接口语义可以明确收敛成一条双向绑定通道
- 父组件和子组件都天然按“当前值 + 更新值”来思考
什么时候更适合显式 props/emit
- 组件不止一种更新意图
- 事件语义需要保持清晰区分
- 组件接口不只是“值变化”，还包含确认、取消、校验、提交等行为
一个实用判断方法
- 如果你脑子里首先想到的是“这个组件暴露一个值入口”，偏向
defineModel - 如果你脑子里首先想到的是“这个组件会发出几种不同语义的事件”，偏向
props/emit
常见误区
- 以为有了
defineModel就应该把所有表单组件都改成双向绑定入口 - 把复杂交互都硬压成一个 model 更新通道
- 把显式
props/emit误解成落后写法，而不是更清楚的接口表达
最短记忆方式
标准值通道适合 defineModel，复杂行为边界更适合显式 props/emit。
面试要点
来自 vue-define-model-vs-props-and-emit-selection-interview-question 的面试视角整理。
一句话回答
如果组件接口本质上就是标准的“当前值 + 更新值”通道，defineModel 会更直接；如果组件需要表达多种不同事件语义、或者接口希望保持更显式的边界，通常更适合继续用 props/emit。
最稳的回答主线
- 先看组件是不是标准值通道
- 是的话，
defineModel更顺手 - 如果事件语义复杂，就保留显式
props/emit - 最后补一句：关键不是新 API，而是接口是否清晰
面试里容易加分的一句
defineModel 适合把已经很明确的双向绑定接口写得更集中，但它不应该替代所有需要明确事件语义的组件通信。
常见追问
- 什么样的组件最适合
defineModel - 为什么复杂弹窗或选择器不一定适合只暴露一个 model
defineModel和多个自定义事件怎么配合
最短记忆方式
值通道用 model，复杂行为用显式事件。