我们知道v-model对于单个property双向数据绑定非常有用,保持父子组件之间的数据传递和同步,但也有很多场景下希望一个组件能够处理多个数据字段,这时就有一些小小技巧了。

https://simonkollross.de/posts/vuejs-using-v-model-with-objects-for-custom-components

比如,以下为createCustomer组件:

<template>
<div>
<div>
<label>Name</label>
<input type="text" :value="value.name" @input="update('name', $event.target.value)">
</div>
<div>
<label>Type</label>
<select :value="value.type" @input="update('type', $event.target.value)">
<option value="Person">Person</option>
<option value="Company">Company</option>
</select>
</div>
</div>
</template>
<script>
export default {
props: ['value'],
methods: {
update(key, value) {
this.$emit('input', { ...this.value, [key]: value })
},
},
}
</script>

组件的使用方法:

<CreateCustomer v-model="{ name: 'John Doe', type: 'Person' }"></CreateCustomer>

v-model绑定一个对象,组件内部分别负责不同字段的场景实现的更多相关文章

  1. 前端MVC Vue2学习总结(五)——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  2. ASP.NET MVC Model绑定小结

    Model绑定是指从URL提取数据,生成对应Action方法的参数这个过程.前面介绍的一系列Descriptor负责提供了控制器,行为方法和参数的元数据,ValueProvieder负责获取数据,剩下 ...

  3. 前端笔记之React(二)组件内部State&React实战&表单元素的受控

    一.组件内部的State 1.1 state state叫状态,是每一个类式组件都有的属性,但函数式组件,没有state. state是一个对象,什么值都可以定义. 在任何类式组件的构造函数中,可以用 ...

  4. ASP.NET MVC Model绑定(六)

    ASP.NET MVC Model绑定(六) 前言 前面的篇幅对于IValueProvider的使用做个基础的示例讲解,但是没并没有对 IValueProvider类型的实现做详细的介绍,然而MVC框 ...

  5. ASP.NET MVC Model绑定(五)

    ASP.NET MVC Model绑定(五) 前言 前面的篇幅对于IValueProvider的获取位置和所处的生成过程做了讲解,本篇将会对IValueProvider的使用做个基础的示例讲解,读完本 ...

  6. ASP.NET MVC Model绑定(四)

    ASP.NET MVC Model绑定(四) 前言 前面的篇幅对于Model绑定器IModelBinder以及实现类型.Model绑定器提供程序都作了粗略的讲解,可以把Model绑定器想象成一个大的容 ...

  7. ASP.NET MVC Model绑定(三)

    ASP.NET MVC Model绑定(三) 前言 看过前两篇的朋友想必对Model绑定有个大概的了解,然而MVC框架给我们提供了更高的可扩展性的提供程序编程模式,也就是本篇的主题了,会讲解一下Mod ...

  8. ASP.NET MVC Model绑定(二)

    ASP.NET MVC Model绑定(二) 前言 上篇对于Model绑定的简单演示想必大家对Model绑定的使用方式有一点的了解,那大家有没有想过Model绑定器是在什么时候执行的?又或是执行的过程 ...

  9. [Web API] Web API 2 深入系列(7) Model绑定(下)

    目录 ModelBinder ModelBinderProvider 不同类型的Model绑定 简单类型 复杂类型 其他类型 ModelBinder ModelBinder是Model绑定的核心. p ...

随机推荐

  1. Oracle 中Number的长度定义

    Number可以通过如下格式来指定:Field_NAME Number(precision ,scale),其中precision指Number可以存储的最大数字长度(不包括左右两边的0),scale ...

  2. AQS(抽象队列同步器)

    AQS(全称为AbstractQueuedSynchronizer),即抽象队列同步器,它维护了一个volatile int state(代表共享资源)和一个FIFO线程等待队列. state的访问方 ...

  3. 完美解决linux下vim在终端不能用鼠标复制的问题

    在vim 中输入 :set mouse=r 就行了,还不行的话 :set mouse=v

  4. CSS3常用新特性

    CSS3的新特性 新增CSS3特性有兼容性问题,ie9+才支持 移动端支持优于PC端 新增选择器和盒子模型以及其他特性 CSS新增选择器 属性选择器 属性选择器可以根据元素特定属性来选择元素,这样就可 ...

  5. Python之dict(或对象)与json之间转化

    在Python语言中,json数据与dict字典以及对象之间的转化,是必不可少的操作. 在Python中自带json库.通过import json导入. 在json模块有2个方法, loads():将 ...

  6. MYSQL 复制整个数据库

    同一个服务器 mysqldump old -u root -p123456  | mysql new -u root -p123456 不同服务器(在源数据库服务器上执行) mysqldump old ...

  7. ABP进阶教程3 - 优化编辑

    点这里进入ABP进阶教程目录 我们尝试在新增/编辑界面增加一个下拉框用来代替输入框编辑Status 添加实体 打开领域层(即JD.CRS.Core)的Entitys目录 //用以存放实体对象添加一个类 ...

  8. docker镜像管理(二)

    docker镜像 docker镜像含有启动容器所需要的文件系统和内容,因此,其用于创建并启动docker容器 docker镜像采用分层构建机制,最底层为bootfs,其之为rootfs bootfs: ...

  9. 各种windows10下的快捷键

    Windows键+ctrl+D 创建虚拟桌面 windows键+Ctrl+方向键 可以切换桌面 windows+tab ctrl+alt+TAB 切换应用 windows+[1-9] 打开任务栏固定的 ...

  10. 初学JavaScript正则表达式(三)

    正则表达式由两种基本的字符类型组成 原义文本字符 //a abc 1 元字符 元字符是有特使含义的非字母字符 * 匹配前面的子表达式零次或多次 + 匹配前面的子表达式一次或多次 ? 匹配前面的子表达式 ...