摘要:在中,经常会使用实现表单的双向数据绑定功能。使用组件时,组件库中的含有输出类型的自定义组件,都会使用指令,该指令绑定的元素就是组件的输出结果。
在 Vue.js 中,经常会使用 v-model 实现表单的双向数据绑定功能。
使用 Element 组件时,组件库中的含有输出类型的自定义组件,都会使用v-model指令,该指令绑定的元素就是组件的输出结果。比如 select选择器
平常只使用v-model做表单元素的数据绑定,没有仔细研究过这背后的原理,不是很理解自定义组件是怎么实现这个功能的。
查找了一下相关资料,其实 Vue.js 的官网上有教程有相关的资料。
使用自定义事件的表单输入组件
v-model 其实是一个语法糖,这背后其实做了两个操作
v-bind 绑定一个 value 属性
v-on 指令给当前元素绑定 input 事件
在原生表单元素中就相当于
当input接收到新的输入,就会触发input事件,将事件目标的value 值赋给绑定的元素
在自定义组件中相当于
这时候,something接受的值就是input是事件的回掉函数的第一个参数
所以在自定义的组件当中,要实现数据绑定,还需要使用[$emit]去触发input的事件。
this.$emit("input", value)
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/88269.html
摘要:来了两个星期的紧张开发,终于发布了支持的版本。整体性能也大幅度提升。报名费用元,报名地址微信扫描二维码更新日志目前已发布至,文档还需一段时间,但很快会发布新版本的来支持。 showImg(https://segmentfault.com/img/remote/1460000008640063?w=1600&h=900); iView2 来了 两个星期的紧张开发,iView 终于发布了支...
摘要:指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于。对象形式佐客汤姆咪口修饰符修饰符是以半角句号指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。修饰符修饰符允许你控制由精确的系统修饰符组合触发的事件。 指令 指令(Directives)是带有v-前缀的特殊属性。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。 v-if条件判断 T...
摘要:以下内容根据部分速记。同时,需要在父组件标签中添加这个属性,该属性才能传递到子组件内。把父组件传递的数据当做子组件的初始值。 以下内容根据Vue.js Guide Essentials部分速记。 不含动画/mixin/SSR/路由/状态管理等部分. Introduction 建议阅读原文 https://vuejs.org/v2/guide/in... 什么是Vue 开始 声明式...
摘要:事件总线事件总线首先创建了一个名为的空的实例然后全局定义了组件最后创建了实例。在父组件模板中,子组件标签上使用指定一个名称,并在父组件内通过来访问指定名称的子组件。 学习笔记:组件详解 组件详解 组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。 全局注册 Vue.component(my-component, {}); 要在父实例中使用这个组件,必须要...
阅读 2689·2021-11-11 17:21
阅读 594·2021-09-23 11:22
阅读 3559·2019-08-30 15:55
阅读 1616·2019-08-29 17:15
阅读 541·2019-08-29 16:38
阅读 885·2019-08-26 11:54
阅读 2478·2019-08-26 11:53
阅读 2737·2019-08-26 10:31