vue自定义组件中的v-model简单解释
在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件的封装效果更好。所以,个人认为,我们自己封装组件也应该有这样的思维,父组件通过slot或者props传值,由子组件完成一些效果,再抛出必要的事件让父组件接受,这样组件的可复用性就很强,有利于多次使用。
v-model指令是什么?
刚刚提到,iview通过v-model双向绑定数据,所以首先我们要明白v-model在这个过程中做了什么。有vue基础的同学应该知道,v-model本质是一个语法糖,在v-bind和v-on的整合。表单元素比如input,v-bind绑定一个值,就把data数据传给了value,同时再通过v-on监听input事件,当表单数据改变的时候,也会把值传给data数据,代码如下
<input type='text' v-model='msg'>
// 相当于
<input type='text' :value=msg @input='msg =$event.target.value'>
vue2.2新增model API
虽说新增,实际上vue3.0都已经发布了,这其实算个比较旧特性,官网是这么写的
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
这句话比较长,咱们来一步步理解,首先是第一句
- 允许一个自定义组件在使用v-model时定制prop和event
一般说来,v-model
用在表单元素上进行数据的双向绑定,自定义组件通常通过父子组件传值绑定数据
- 默认情况下,一个组件上的
v-model
会把value用作prop且把input用作event
前边说了,v-model
是v-bind
和v-on
的语法糖,那么这里v-model
就完成两个步骤
举一个栗子
比如
// 父组件
<Child v-model='iptValue'></Child>
// 子组件
Vue.components('Child',{
model: {
prop: ipt,
evnet: change
}
props: {
ipt: Number
}
template: `<input type='number' :value='ipt' @change='$emit("change",parseInt($event.target.value))'>`
})
这里父组件中的v-model相当于
<Child :value='iptValue' @change='value => iptValue = value'></Child>
用文字解释下上面的代码
前面说了,父子组件传值通过prop和$emit,第一步父组件把iptValue通过prop传给了子组件,但要注意,我这里的子组件给prop取了一个别名叫做ipt
作为区分,所以子组件的prop对象中的键为我取的别名ipt
。第二步,当子组件input值改变的时候,子组件监听了一个onchange方法,注意我这里也给$emit中的事件取了一个别名,只不过这个别名和原来的名字一样change,input值改变emit提交change事件并把新值传给父组件,又又又要注意,$emit的荷载都是字符串....
然后就跟上面代码一样
父组件执行value => iptValue = value
语句,这样就完成了父子组件数据的双向绑定
个人觉得v-model
用在自定义组件最大的好处是提高了组件的封装性,父组件不必要另外写一个接受子组件发送给来的$emit方法
- 最后是第三句话,
但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的
其实这很容易理解,因为value
字符串在input中是有意义的,取别名有利于区分,不太重要啦这一小部分...
结束
那么以上就是个人对于自定义组件v-model
的一点心得,文章有疑问或错误的地方还请指出,感谢阅读
vue自定义组件中的v-model简单解释的更多相关文章
- Vue自定义组件中Props中接收数组或对象
原文:https://www.jianshu.com/p/904551dc6c15 自定义弹框组件时,需要在弹框内展示商品list,所以需要组件中的对应字段接收一个Array数组,默认返回空数组[], ...
- Vue自定义组件实现v-model指令
Tips: 本文所描述的Vue均默认是Vue2版本 在我们初次接触Vue的时候,一定会了解到一个语法糖,那就是v-model指令,它带给我们的第一印象就是它可以实现双向绑定 那么,什么是双向绑定?通俗 ...
- vue框架之自定义组件中使用v-model
通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...
- 【vue】---- v-model在自定义组件中的使用
1. v-model简介 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定,它的本质是一个语法 ...
- vue自定义组件(vue.use(),install)+全局组件+局部组件
相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...
- 微信小程序自定义组件的使用以及调用自定义组件中的方法
在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装为一个组件,也就是通常说 ...
- 在自定义组件中获取spring底层组件
要想在自定义组件中获取spring底层的各种组件,只需让自定义组件实现一系列接口即可,这些接口都是Aware的子接口.常见的有: 1. ApplicationContextAware——用于获取IOC ...
- vue 自定义组件 v-model双向绑定、 父子组件同步通信
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- vue 自定义组件 v-model双向绑定、 父子组件同步通信【转】
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
随机推荐
- Java编程思想:File类list()方法
import java.util.regex.Pattern; import java.io.File; import java.io.FilenameFilter; public class Tes ...
- Java编程思想:简单的泛型
import java.util.ArrayList; import java.util.Random; public class Test { public static void main(Str ...
- ASP.NET Core MVC 之模型(Model)
1.模型绑定 ASP.NET Core MVC 中的模型绑定将数据从HTTP请求映射到操作方法参数.参数既可以是简单类型,也可以是复杂类型.MVC 通过抽象绑定解决了这个问题. 2.使用模型绑定 当 ...
- 使用nvm管理多个不同版本的nodeJS之安装成功nodeJs之后使用npm报错的问题
使用nvm安装nodeJS之后,node -v命令可以正常使用,但是npm命令一直报“npm不是内部命令”的错误,深入研究之后得到以下解决方案: 搭建步骤: (1)下载nvm https://gi ...
- [leetcode] 147. Insertion Sort List (Medium)
原题 别人的思路 非常简洁 function ListNode(val) { this.val = val; this.next = null; } /** * @param {ListNode} h ...
- IIS应用程序池标识(程序池账户)ApplicationPoolIdentify
IIS中应用程序池的运行账户(标识)有以下4个选项 LocalService 本地服务 LocalSystem 本地系统 NetWorkService 网络服务 ApplicationPoolIden ...
- 下载Opencv和OpencvSharp,让我们开始图像之旅
我们学习和使用OpencvSharp,还下载Opencv干什么?很简单,研究人家的源码是最好和最快速的学习方式. 第一Opencv源码下载,网络上很多,请大家自行搜索,版本请下载4.1.0.当前你要用 ...
- C语言编程入门之--第二章编译环境搭建
第二章 编译环境搭建 导读:C语言程序如何工作,首先需要编译链接成可执行文件,然后就可以运行在不同的环境中,这个“环境”的意思就是比如说,电脑,手机,路由器,蓝牙音箱等等智能设备中,其中编译器启到了关 ...
- 简单的JSP分页显示
1.mysql的limit关键字 (DAO) select * from tablename limit startPoint, numberPerPage; tablename 就是要分页显示的那张 ...
- threeJS创建mesh,创建平面,设置mesh的平移,旋转、缩放、自传、透明度、拉伸
这个小案例是当初我在学习的时候,小的一个小案例,代码还需要进一步优化:还请谅解~~:主要用到了threeJS创建mesh,创建平面,设置mesh的平移,旋转.缩放.自传.透明度.拉伸等这些小功能: 采 ...