组件v-model另一种实现方式

MagnumHou 2023-03-03 11:28:08

课时名称	课时知识点
组件v-model另一种实现方式	组件v-model另一种实现方式组件v-model另一种实现方式组件v-model另一种实现方式

...全文

70 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

本文探讨了Vue组件如何实现自定义v-model进行prop的双向绑定，以iview的对话框组件为例，解释了其实现原理。v-model实际上是:value和@input的语法糖。文中提供了一个简单的例子，通过父子组件间的通信来控制组件状态，同时也提到了Vue官方的另一种自定义v-model的实现方式。

本文介绍了 v-model 的基本用法，它可在组件上实现双向绑定。先阐述了 v-model 在原生元素上的用法及模板编译器的等价展开，接着说明在组件上使用时的展开形式，还提到组件内部需做的两件事，另外介绍了在组件内实现 v-model 的另一种方式，即使用可写的 computed 属性。

博客介绍了组件上多个 v-model 绑定的情况，每个 v-model 可同步不同的 prop，无需额外选项。还给出了子组件代码、父组件代码，以及子组件的另一种实现方式。

文章详细对比了Vue2和Vue3中自定义组件如何处理v-model的情况。在Vue2中，通过props接收值并使用$emit触发changeActive事件。而在Vue3中，v-model绑定变为modelValue，更新方法固定为@update:modelValue。此外，还介绍了在Vue3中使用计算属性和setup语法实现v-model的另一种方式。

在Vue2中，对于contenteditable属性的div，v-model无法直接应用。一种解决办法是创建自定义指令，但由于Vue2移除了相关方法，这种方式不再适用。另一种可行的解决方案是通过创建一个组件，利用组件内部的数据处理和事件触发实现双向绑定，将内容更新回传给父组件。通过v-model在父组件中使用该组件，可以达到预期效果。

橙汐工作室

3

社区成员

332

社区内容

发帖

与我相关

我的任务

vue.js前端框架html5 企业社区天津·河西区

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

核心使命：为IT从业者和技术爱好者提供一个优质的学习、交流和分享平台，促进技术创新和成长。
注意事项：请保持尊重、友善的交流环境，遵守社区规则，禁止发布违法、侵权、低俗或有害信息。
激励机制：为了鼓励积极参与社区的用户，我们会设置积分和勋章系统，支持高质量的原创内容和有益的互动。
感谢您的加入，期待与您一起在CSDN社区共同探索技术，交流经验，共同成长！

试试用AI创作助手写篇文章吧

+ 用AI写文章