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

MagnumHou 2023-03-03 11:28:08

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

...全文

79 回复打赏收藏举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

用过iview组件的的同学都知道，iview的组件一般有:value的情况下，还会提供v-model进行双向绑定，例如iview的对话框组件（地址），内部原理是怎么实现的呢？今天我们就来一探究竟。在官方给出的v-model指令中，实际上是:value和@input组合的一个语法糖<input v-model="inputVal"> // 相当于 <input :value="in...

另一种在组件内实现 v-model 的方式是使用一个可写的，同时具有 getter 和 setter 的 computed 属性。1、将内部原生元素的 value attribute 绑定到 modelValue prop。2、当原生的 input 事件触发时，触发一个携带了新值的 update:modelValue 自定义事件。在代码背后，模板编译器会对 v-model 进行更冗长的等价展开。v-model 可以在组件上使用以实现双向绑定。

子组件改成另一种方式。

自定义组件：v-model默认绑定的不是value，而是modelValue。发射的方法固定位为@update：modelValue。自定义组件：props接收+model对象里写prop和event+method里写具体方法。的方式是使用一个可写的，同时具有 getter 和 setter 的。方法需触发相应的事件。

在 Vue 中，v-model 是一个常用的指令，用于实现表单元素和组件之间的双向绑定。当我们使用原生的表单元素时，直接使用 v-model 是很方便的，但是对于自定义组件来说，要实现类似的双向绑定功能就需要一些额外的处理。本篇文章将介绍几种在自定义组件中实现 v-model 的方式，主要如下：使用v-model属性：适用于表单元素定义model属性：适用于非表单元素。

橙汐工作室

3

社区成员

332

社区内容

发帖

与我相关

我的任务

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

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

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

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

+ 用AI写文章