[Vue] useVModel
One way data binding, the parent component pasing data through v-model
to child component, if child modify the data, v-model
will take care emit the changed back to parent component. This partten works fine.
But there might be some problem, for example, what if inside child component, it also use v-model
bind to a form input component, when form input change the data, it only mutate child component, but parent component won't get updated.
That's been said we shouldn't use v-modle
inside child component in this case, we need to use :modelValue
, @update:modelValue
combined.
const cacheMap = new WeakMap()
export function useVModel(props, propName, emit) {
return computed({
get() {
if (cacheMap.has(props[propName])) {
return cacheMap.has(props[propName])
}
const proxy = new Proxy(props[propName], {
get(target, key) {
return Reflect.get(target, key)
},
set(target, key, value) {
emit(`update:${propName}`, {
...target,
[key]: value
})
return true
}
})
cacheMap.set(props[propName], proxy);
return proxy
},
set(val) {
emit(`update:modelValue`, val)
}
})
}
分类:
Javascript
, Vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
2023-08-25 [Algorithm] LRU Cache
2020-08-25 [React] Styled System with extendable Box element
2019-08-25 Define Interfaces and Share Class Members through Mixins in Dart
2019-08-25 [Dart] Understand Classes and Inheritance in Dart
2016-08-25 [WebGL] Setting Up WebGL
2016-08-25 [Redux] Accessing Dispatch and State with Redux -- connect
2015-08-25 [Angular 2] 8. Better ES5 Code