v-model在Vue.js中的非表单应用场景是什么？

Question

v-model除了用在表单上还有哪些应用场景？

在el-drawer组件上使用了v-model,为什么这个组件需要v-model呢？它也不涉及表单，直接传一个ref不可以吗？

Answer 1

v-model本质上是prop + update:prop 的组合
官网详细说明
AI答案也是可以的

Answer 2

因为 ele-plus 是UI组件库啊，总不能不提供对应的API，让用户自己去操作 refs 吧，或者和 ele-ui 2x 时期一样，通过 props 传入 visible，然后再手动监听 update:prop 的方式去手动改变 visible 属性。那也太容易让人诟病了。
所以如果都已经提供了 visible、update:prop 或者类 open/close 的方法，那不就是提供了和 v-model 的功能类似了，所以直接使用 v-model 这样的语法糖不是很简便吗（当然你也可以不用 v-model 手动去控制组件的显隐）。

---

在 ele-ui 2x 时期的 el-drawer 和 el-dialog 都是通过 props.sync 的方式来实现的。但这其实是因为 Vue 2x 不支持绑定多个 v-model，Vue 3x 已经支持了多个 v-model 的绑定，而且移除了 sync 修饰符，所以 ele-plus 就是现在的状态了了。

• v-model | Vue 3 迁移指南

---

其实在你 上一个问题 中我就已经简单描述过两种不同的设计路径了，对于UI库来说是不知道用户是否会在 on-open/on-close 时期做一些额外的处理。所以会通过抛出多个事件的方式来用户在组件外部自行处理。

而我们自己封装的业务组件，很多时候是会做一些通用的初始化，并且很明确我们是知道是有哪些方法可以被调用的。所以把这些打开/关闭功能放到“抽屉”组件内部就可以简写很多重复业务代码。如果通过 watch:props 的方式去初始化，有需要判断很多复杂场景（新增打开、编辑打开、查看详情等等）。所以才会推荐使用 refs 去调用内部方法的形式。