Vue.js组件中v-model的使用

calx 发布于2019-08-21 15:49 / 367人阅读

摘要：在中，经常会使用实现表单的双向数据绑定功能。使用组件时，组件库中的含有输出类型的自定义组件，都会使用指令，该指令绑定的元素就是组件的输出结果。

在 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)

GPU云服务器云服务器在php中使用组件 linux中的使用 ios中sqlite的使用 java中二维数组的使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88269.html

iView2 来了，全面支持 Vue.js 2.x

摘要：来了两个星期的紧张开发，终于发布了支持的版本。整体性能也大幅度提升。报名费用元，报名地址微信扫描二维码更新日志目前已发布至，文档还需一段时间，但很快会发布新版本的来支持。 showImg(https://segmentfault.com/img/remote/1460000008640063?w=1600&h=900); iView2 来了两个星期的紧张开发，iView 终于发布了支...

YFan 2019-08-21 11:34 评论0 收藏0
v-model

摘要：用法中比较基础的用法是在表单控件中，创建双向数据绑定，能够更新数据并负责监听用户的输入事件实例代码这里是监听了输入框的事件，并将其赋值给。找到的父组件就是组件，里面没有注册任何方法只是了属性。因为在也是利用了的语法糖。 Vue v-model 用法 vue 中v-model 比较基础的用法是在表单控件中，创建双向数据绑定，能够更新数据并负责监听用户的输入事件实例代码 ...

RiverLi 2019-08-21 11:53 评论0 收藏0
vue.js学习笔记

摘要：指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于。对象形式佐客汤姆咪口修饰符修饰符是以半角句号指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。修饰符修饰符允许你控制由精确的系统修饰符组合触发的事件。指令指令(Directives)是带有v-前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。 v-if条件判断 T...

levy9527 2019-08-22 16:24 评论0 收藏0
Vue.js Guide Essentials-说人话-速记版

摘要：以下内容根据部分速记。同时，需要在父组件标签中添加这个属性，该属性才能传递到子组件内。把父组件传递的数据当做子组件的初始值。以下内容根据Vue.js Guide Essentials部分速记。不含动画/mixin/SSR/路由/状态管理等部分. Introduction 建议阅读原文 https://vuejs.org/v2/guide/in... 什么是Vue 开始声明式...

Sanchi 2019-08-21 18:38 评论0 收藏0
Vue.js-组件详解

摘要：事件总线事件总线首先创建了一个名为的空的实例然后全局定义了组件最后创建了实例。在父组件模板中，子组件标签上使用指定一个名称，并在父组件内通过来访问指定名称的子组件。学习笔记：组件详解组件详解组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册 Vue.component(my-component, {}); 要在父实例中使用这个组件，必须要...

jeffrey_up 2019-08-23 16:02 评论0 收藏0