在使用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 选项可以回避这些情况产生的冲突。

这句话比较长,咱们来一步步理解,首先是第一句

  1. 允许一个自定义组件在使用v-model时定制prop和event

一般说来,v-model用在表单元素上进行数据的双向绑定,自定义组件通常通过父子组件传值绑定数据

  1. 默认情况下,一个组件上的v-model会把value用作prop且把input用作event

前边说了,v-modelv-bindv-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方法

  1. 最后是第三句话,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的

其实这很容易理解,因为value字符串在input中是有意义的,取别名有利于区分,不太重要啦这一小部分...

结束

那么以上就是个人对于自定义组件v-model的一点心得,文章有疑问或错误的地方还请指出,感谢阅读

vue自定义组件中的v-model简单解释的更多相关文章

  1. Vue自定义组件中Props中接收数组或对象

    原文:https://www.jianshu.com/p/904551dc6c15 自定义弹框组件时,需要在弹框内展示商品list,所以需要组件中的对应字段接收一个Array数组,默认返回空数组[], ...

  2. Vue自定义组件实现v-model指令

    Tips: 本文所描述的Vue均默认是Vue2版本 在我们初次接触Vue的时候,一定会了解到一个语法糖,那就是v-model指令,它带给我们的第一印象就是它可以实现双向绑定 那么,什么是双向绑定?通俗 ...

  3. vue框架之自定义组件中使用v-model

    通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...

  4. 【vue】---- v-model在自定义组件中的使用

    1. v-model简介 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定,它的本质是一个语法 ...

  5. vue自定义组件(vue.use(),install)+全局组件+局部组件

    相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...

  6. 微信小程序自定义组件的使用以及调用自定义组件中的方法

    在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装为一个组件,也就是通常说 ...

  7. 在自定义组件中获取spring底层组件

    要想在自定义组件中获取spring底层的各种组件,只需让自定义组件实现一系列接口即可,这些接口都是Aware的子接口.常见的有: 1. ApplicationContextAware——用于获取IOC ...

  8. vue 自定义组件 v-model双向绑定、 父子组件同步通信

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  9. vue 自定义组件 v-model双向绑定、 父子组件同步通信【转】

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

随机推荐

  1. Java编程思想:File类list()方法

    import java.util.regex.Pattern; import java.io.File; import java.io.FilenameFilter; public class Tes ...

  2. Java编程思想:简单的泛型

    import java.util.ArrayList; import java.util.Random; public class Test { public static void main(Str ...

  3. ASP.NET Core MVC 之模型(Model)

    1.模型绑定 ASP.NET Core MVC 中的模型绑定将数据从HTTP请求映射到操作方法参数.参数既可以是简单类型,也可以是复杂类型.MVC 通过抽象绑定解决了这个问题. 2.使用模型绑定 当 ...

  4. 使用nvm管理多个不同版本的nodeJS之安装成功nodeJs之后使用npm报错的问题

    使用nvm安装nodeJS之后,node -v命令可以正常使用,但是npm命令一直报“npm不是内部命令”的错误,深入研究之后得到以下解决方案: 搭建步骤: (1)下载nvm   https://gi ...

  5. [leetcode] 147. Insertion Sort List (Medium)

    原题 别人的思路 非常简洁 function ListNode(val) { this.val = val; this.next = null; } /** * @param {ListNode} h ...

  6. IIS应用程序池标识(程序池账户)ApplicationPoolIdentify

    IIS中应用程序池的运行账户(标识)有以下4个选项 LocalService 本地服务 LocalSystem 本地系统 NetWorkService 网络服务 ApplicationPoolIden ...

  7. 下载Opencv和OpencvSharp,让我们开始图像之旅

    我们学习和使用OpencvSharp,还下载Opencv干什么?很简单,研究人家的源码是最好和最快速的学习方式. 第一Opencv源码下载,网络上很多,请大家自行搜索,版本请下载4.1.0.当前你要用 ...

  8. C语言编程入门之--第二章编译环境搭建

    第二章 编译环境搭建 导读:C语言程序如何工作,首先需要编译链接成可执行文件,然后就可以运行在不同的环境中,这个“环境”的意思就是比如说,电脑,手机,路由器,蓝牙音箱等等智能设备中,其中编译器启到了关 ...

  9. 简单的JSP分页显示

    1.mysql的limit关键字 (DAO) select * from tablename limit startPoint, numberPerPage; tablename 就是要分页显示的那张 ...

  10. threeJS创建mesh,创建平面,设置mesh的平移,旋转、缩放、自传、透明度、拉伸

    这个小案例是当初我在学习的时候,小的一个小案例,代码还需要进一步优化:还请谅解~~:主要用到了threeJS创建mesh,创建平面,设置mesh的平移,旋转.缩放.自传.透明度.拉伸等这些小功能: 采 ...