我们知道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. DataGridView怎样实现添加、删除、上移、下移一行

    场景 在Winform中使用DataGridView实现添加一行.删除一行.上移一行.下移一行. 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi ...

  2. crm-4权限

    1.rbac-优化login函数 因为login是业务逻辑 ,而rbac是个组件 ,将rbac在login的代码分离 ###初始化权限函数分离出去 rbac/service/permission fr ...

  3. HTTP 压测工具wrk简介

    前段时间项目压测,看到开发命令行下使用这个命令进行压测非常简洁.方便,萌发了学习的兴趣,这里仅做简单介绍. 安装 wrk支持大多数UNIX系统,不支持Windows.需要操作系统支持LuaJIT和Op ...

  4. 安装Ubuntu系统后的配置工作

    目录 卸载webapps和LibreOffice 修改软件更新和安装的apt源 修改安装python库的pip源 安装并设置搜狗输入法 安装vim.git.pip和tweak软件 修改用户主目录下的文 ...

  5. 软工个人项目(Java实现)

    一. Github地址: https://github.com/RuiBingo/PersonalWork 二.个人PSP表格: PSP2.1 PSP阶段 预估耗时(分钟) 实际耗时(分钟) Plan ...

  6. 并发修改异常ConcurrentModificationException

    1.简述:在使用 迭代器对象遍历集合时,使用集合对象修改集合中的元素导致出现异常 public static void main(String[] args) { List<Integer> ...

  7. LVM 在线扩容磁盘(ubuntu 14.04 server)

    mware workstation 8 或者 vmware vsphere client 6.0( exsi 6.0) (前提:你的服务器需要有已经存在的卷组,才可以添加新的物理卷到卷组,然后再扩容逻 ...

  8. ACM-ICPC 2018 沈阳赛区网络预赛 J. Ka Chang(树上分块+dfs序+线段树)

    题意 链接:https://nanti.jisuanke.com/t/A1998 给出一个有根树(根是1),有n个结点.初始的时候每个结点的值都是0.下面有q个操作,操作有两种,操作1.将深度为L(根 ...

  9. 组装数据--相同的clusterID合并在一起 左边是a接口 右边是B接口如 [{a接口},{b接口}]

    组装成这种  var BJData = [ [{"city": "无锡市","clusterID": 1, "y": 3 ...

  10. 父组件调用子组件中的方法- this.$refs.xxx.子组件方法();

    子组件中有一个说的方法 在父组件中去调用当你点击的时候 去调用子组件中的方法 fu.vue 在父组件的方法中调用子组件的方法,很重要 this.$refs.mychild.parentHandlecl ...