用过vuejs的前端工程师,对于v-model一定印象深刻。它向类似textarea,input等原生html原生添加双向数据绑定的能力非常方便。但是对于你的定制vue组件并不是能够直接应用v-model的,我们需要做一些额外的工作,但是这个额外工作是非常简单的。

为了理解如何给你的组件提供v-momeiydel支持,你应该深入地了解v-model本身底层是如何工作地。v-model初看起来就像是一个魔术,但是真的没有那么神秘。

v-model="syncedProp"

等价于以下代码

:value="syncedProp" @input="syncedProp=$arguments[0] 或者
:value="syncedProp" @input="syncedProp=$event.target.value

理解了以上地两点,那么如果需要支持v-model,你自己的组件需要做的就是:

1. 接收一个:value的property

2. 当用户变更value值的时候发送一个@input事件

基础实现:

我们假设我们有一个date picker的组件,该组件接收year,month的value:{month:1,year:2019},我们希望该组件有两个输入Inputs,一个用于month,一个用于year,并且通过v-model来更新绑定的对象.这里是实现的例子代码:

<template>
<div class="date-picker">
Month: <input type="number" ref="monthPicker" :value="value.month" @input="updateDate()"/>
Year: <input type="number" ref="yearPicker" :value="value.year" @input="updateDate()"/>
</div>
</template> <script>
export default {
props: ['value'], methods: {
updateDate() {
this.$emit('input', {
month: +this.$refs.monthPicker.value,
year: +this.$refs.yearPicker.value
})
}
}
};
</script>

有了以上的实现代码后,我们就可以像下面的代码来使用它:

<template>
<div class="wrapper">
<date-picker v-model="date"></date-picker>
<p>
Month: {{date.month}}
Year: {{date.year}}
</p>
</div>
</template> <script>
import DatePicker from './DatePicker.vue'; export default {
components: {
DatePicker
}, data() {
return {
date: {
month: 1,
year: 2017
}
}
}
})
</script>

总结以上范例代码,我们可以看到就做了两件事:

1. 接受一个value这个prop,并通过该value prop传入的值在本组件中使用

2. 当需要通知外部数据已经变化需要更新外部的绑定数据时,只需要emit一个input事件即可!

高级一点的例子

在上面基础版本基础上,我们把事情搞得稍微复杂一点,比如,我们传入的日期格式不是object形式,而时字符串形式mm/yyyy的格式,这时需要使用的化,必须要做进一步处理,同样地,当用户主动修改了数据修正外部地数据时,也需要再组合成一个字符串emit出去!

<template>
<div class="date-picker">
Month: <input type="number" ref="monthPicker" :value="splitDate.month" @input="updateDate()"/>
Year: <input type="number" ref="yearPicker" :value="splitDate.year" @input="updateDate()"/>
</div>
</template> <script>
export default {
props: ['value'], computed: {
splitDate() {
const splitValueString = this.value.split('/'); return {
month: splitValueString[0],
year: splitValueString[1]
}
}
}, methods: {
updateDate() {
const monthValue = this.$refs.monthPicker.value;
const yearValue = this.$refs.yearPicker.value;
this.$emit('input', `${monthValue}/${yearValue}`);
}
}
};
</script>

定制v-model所使用的prop和event

如上面所说,v-model匹配的就是value属性以及input的事件上报,但是我们也可以修改这个默认的行为。

其办法就是通过在我们的定制组件中,声明一个model对象,该model对象包含两个字段,一个prop,一个event分别用于对应的value和input事件

比如下面的组件代码:

export default {
prop: ['cprop'],
model: {
prop: 'cprop',
event: 'cevent'
}
methods: {
handleInput (value) {
this.$emit('cevent', value)
}
}
}

如果我们在html中像下面来使用:

<basic-input v-model="email" />
<!-- 等价于以下代码 -->
<basic-input :cprop="email" @cevent="e => email = e.target.value" />

给定制的vuejs组件添加v-model双向绑定支持的更多相关文章

  1. react第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)

    第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能) #课程目标 理解因为react的单向数据流 理解表单组件会因为react数据流变的不好维护 理解受控组件与非受控组件的实质区别 理解 ...

  2. vue 实现父组件和子组件之间的数据双向绑定

    前言:vue 实现父组件给子组件传值,然后子组件可以修改回父组件的值.vue 的 prop 默认是单向数据绑定,但是偶尔需要双向绑定,这时就需要知道如何才能让子组件的数据修改时影响到父组件的数据.转载 ...

  3. (复习)父子组件传值使用v-modal双向绑定,报错Avoid mutating a prop directly解决方案

    报错:Avoid mutating a prop directly since the value will be overwritten whenever the parent component. ...

  4. vue model双向绑定

    view <div id='demo' class="container"> <input type="text" v-model='name ...

  5. 面试问题:Vuejs如何实现双向绑定

    最近出去面试,栽在这个问题上,提到vuejs,面试官一般会让你说vuejs的特点,一般就要回答virtual dom tree, dom tree diff, 以及数据双向绑定,然后面试官会追问你,v ...

  6. 如何在Vue2中实现组件props双向绑定

    Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用pr ...

  7. angularjs1.x版本,父子组件之间的双向绑定

    今天遇到了一个angularjs的坑, ng-repeat和ng-if会改变他所包含的html中绑定变量的作用域. angularjs自定义指令,可以定义四种变量,通过 =,@,&双向绑定,单 ...

  8. Vuejs——(8)Vuejs组件的定义

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...

  9. 深入理解 Vuejs 组件

    本文主要归纳在 Vuejs 学习过程中对于 Vuejs 组件的各个相关要点.由于本人水平有限,如文中出现错误请多多包涵并指正,感谢.如果需要看更清晰的代码高亮,请跳转至我的个人站点的 深入理解 Vue ...

随机推荐

  1. 3-3 groupby操作

    Pandas章节应用的数据可以在以下链接下载:  https://files.cnblogs.com/files/AI-robort/Titanic_Data-master.zip .caret, . ...

  2. C++编译错误 --- 成员函数定义在 .h 文件中出现重定义错误(Error LNK 2005)

    今天写了一个简单的类,定义在 .h 文件中, 类很简单就将其成员函数定义在了一起(class类后面).运行的时候出现了如下图所示的编译错误(error LNK2005) 查资料,大部分都是说需要加上 ...

  3. Linux---进程控制类命令

    1.查看系统中的进程命令 (1)ps (2)top 2.控制系统中的进程命令 (1)kill (2)killall (3)nice (4)renice 3.进程后台运行命令 (1)& 4.进程 ...

  4. pdfium 代码执行流程

    1.FPDF_InitLibrary(NULL); CPDF_CustomAccess::CPDF_CustomAccess(FPDF_FILEACCESS* pFileAccess) {     i ...

  5. 201871010126 王亚涛 《面向对象程序设计 Java》 第十五周学习总结

    内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/11 ...

  6. appium python demo

    #coding=utf-8from appium import webdriverdesired_caps={}desired_caps["platformName"]=" ...

  7. Linux sh、source和.命令执行.sh文件的区别

    sh文件介绍 .sh为Linux的脚本文件,我们可以通过.sh执行一些命令,可以理解为windows的.bat批处理文件. 点命令 .命令和source是同一个命令,可以理解为source的缩写,简称 ...

  8. JAVA大数的一些操作

    参考: https://www.cnblogs.com/tonyyy/p/10433460.html https://www.cnblogs.com/wkfvawl/p/9377441.html (d ...

  9. 页面配置snmp设备有问题,有时候能收到测试团体名的信息,有时候收不到

    现在走的是使用fabric远程连接zabbix服务器,这其中也会耗时间,代码中写的2s不返回数据就提示检查snmp信息失败,不合理, 目前df的server跟show在同一台机器,可以在本地直接调用, ...

  10. nowcoder907B n的约数

    题意 t次询问,每次给你一个数n,求在[1,n]内约数个数最多的数的约数个数 \(t \le 500,n \le 10^{19}\) 思路 首先可以想到将n质因数分解.即\(n= \prod\limi ...