Vue自定义v-model和其修饰符的内部机制

v-model 是一个重要的双向绑定语法糖。

然而,当我们使用自定义组件的v-model,或者如 Naive UI 的输入框组件(v-model:value),并试图使用 v-model.trim 或者 v-model:value.trim 修饰符时,会发现它并不起作用。

一起深入 NaiveUi,Vue源码看看怎么回事?

自定义 v-model 中的修饰符问题

失焦后空格还是存在。

查看NaiveUinInput组件源码。发现就是简单的自定义v-model

Vue.js 官方文档的说法

vue官网对自定义v-model后的修饰符并没有说会失效。只说了可以获取到修饰符。

Vue.js 官方演练场的编译结果

去vue官方演练场看看编译后的结果:

play.vuejs.org

发现自定义v-model 真的就是一个简单的语法糖。没有看到任何对修饰符的处理

看下vue内置的v-model

可以看到在input上使用 vue内置的 v-model 被编译后 使用了指令vModelText

到源码找到这个指令vModelText。看到是在这里对修饰符trim做的处理。
扩展一下吧,组件内部实现v-model,这个应该经常用到:

结论

在vue中,v-model添加修饰符只有在原生的input、textarea中生效。

对于第三方组件库得具体看它们自己有没有对修饰符处理。

v-model的内置修饰符:.lazy .number .trim

相关推荐
niucloud-admin2 分钟前
diy自定义组件/页面装修开发——自定义页面模板
前端
wordbaby5 分钟前
React Native 实战:构建一个现代化的 Todo List (React Query + SafeArea + 键盘适配)
前端·react native
T___T7 分钟前
class 出现前,JS 是怎么继承的
前端·javascript·面试
b***74887 分钟前
前端技术的下一场革命:体验、架构与智能协作的深度重构
前端·重构·架构
2201_7578308710 分钟前
JS的学习
前端·javascript·学习
鸡腿大王11 分钟前
震惊:v8引擎竟是如此操作代码(JS预编译)
前端·javascript
whisper11 分钟前
pnpm和npm对比,为什么现在更多项目使用pnpm运行项目
前端
梨子同志12 分钟前
Node.js 模块系统
前端
用户29654127591712 分钟前
JSAPIThree 加载 WMS、WMTS 和通用栅格图学习笔记:标准地图服务与切图规则
前端
白龙马云行技术团队13 分钟前
Antd Tree组件定制化性能提升实践
前端