android中怎么保存checkbox中的checked属性_Vue 精粹:v-model指令在组件中怎么玩

405aae393c083aecd7c90dc9e37c72aa.png

最近在写组件的时候,遇到了 v-model 的使用问题,在 Vue 官方文档中,有两小端内容是关于 v-model 指令在组件中的使用,查阅文档后,依然不得要领,最后几番折腾,理论结合实践,终于领悟其精髓,遂成文分享之。

v-model 通常都是运用在表单组件中,在这里我们以一个 select组件为例,组件命名为 a-select。

v-model写在哪?

第一个问题就是 v-model 指令是写在子组件里还是父组件里。

我在最开始写组件时就遇到这个问题,归根结底是对在组件中使用 v-model 指令的了解还处于混沌的状态。

文档中有提到

要让组件的 v-model 生效,它应该 (在 2.2.0+ 这是可配置的):

  • 接受一个 value 属性
  • 在有新的值时触发 input 事件

所以我们需要通过触发事件来实现 value 的更新,而 Vue 中:

父子组件的关系可以总结为 props down, events up

那么很明显,我们是在父组件里写 v-model。

子组件怎么更新父组件的值?

那在父组件中我们可以这么写:

 复制代码

文档 告诉我们,v-model 只是一个语法糖,实际的含义是:

  

那在子组件中,怎么更新父组件的值(parentValue)呢?我翻遍了文档,也没找到,但我找到了一段看似相关的 定制组件的 v-model,因为其中说了:

默认情况下,一个组件的 v-model 会使用 value 属性和 input 事件,但是诸如单选框、复选框之类的输入类型可能把 value 属性用作了别的目的

同样,我们的 select 组件的 value 值也被占用,而且没有 input事件。

看来我们需要定制 v-model 了, 开始之前,我们先来把例子看懂。

 Vue.component('my-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean, // this allows using the `value` prop for a different purpose value: String }, // ... })

新增的 model 属性值里有两个key,分别为 prop、event,值分别为 checked、change,看到这里,我们弯起嘴角,会心一笑。

model 属性值(model这个名称真是取得简明扼要啊)里的两个key其实就是 v-model 这个语法糖所代表的 prop 和 event,分别表示 该表单元素的值改变元素值时触发的事件, 在 input 中,这两个值是value 和 input(默认值),在 checkbox 中表示 checked 和 change。

以此类推,在 select 中就表示 selected 和 change。

到这里,我就需要指出我们上面说的一个错误了,此时的 v-model 在父组件中的实际含义是:

  

那么我们可以这么来写子组件:

 {{item.text}} export default() { model: { prop: 'selected', event: 'change' }, props: { selectData: { type: Array }, }, methods: { emitChange(value){ this.$emit('change', value); } } }

唯一的问题在于,我们需要在初始化时设置选中项,该怎么办?我们还有一个 selected 属性值没有呢。甚至官网也温馨提示我们:

注意你仍然需要显性声明 checked 属性。

所以这里我们需要显性声明 selected 属性,不过,因为有 v-model 的存在,我们可以不用在父组件里传入 selected值,是不是少了一点工作量呢?

所以子组件里是这么写的: {{item.text}} export default() { model: { prop: 'selected', event: 'change' }, props: { selectData: { type: Array }, selected: { type: [String,Number] } }, methods: { emitChange(value){ this.$emit('change', value); } } }

当然了,作为一个完整的 select 组件,上面的示例其实是很简陋的。

完整的 select 组件代码可以看iview

f89d3948a83bd171baf22f70af0e6ac8.png
47e2bfa85797e0e001a1459f5fe17161.png

最后分享两个最近在读的掘金小册,大牛果然还是人家的大牛,现阶段膜拜还是要有的,我读了感觉收货很大,推荐给我的读者小伙伴们。好看不贵还实惠(其实也是我的),大概就是人家掘金小册的定位了吧


链接文章:

https://juejin.im/post/598bf7a3f265da3e252a1d6a

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/246023.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

xcode 自动化出包

iOS提高效率之Xcodebuild自动打包总结 - 简书 使用xcodebuild命令进行自动化打包 - 简书 Add a profile to the provisioningProfiles dictionary in your Export Options property list. | 亂馬客 - Re:從零開始的軟體開發生活

linux location root访问文件夹404_如何使网站支持https访问?nginx配置https证书

购买SSL证书要想使用https访问你的网址,首先得拥有颁发的SSL证书。我使用的是免费版,有效期为一年,过期后再重新申请。申请SSL证书购买后,可在搜索框输入证书关键字进入到控制台。点击证书申请,按照提示填写完相关信息…

c++头文件能否包含函数实现?

头文件即.h文件一般是用来写函数或者类的定义的&#xff0c;而函数的实现一般在cpp文件中完成&#xff0e;但是我也看到过一些文件就在头文件中同时定义函数和实现&#xff0e;打个比方我现在有个头文件名叫header.h,内容如下 #include <iostream>void printInt(int numb…

mysql rank函数_Sql 四大排名函数(ROW_NUMBER、RANK、DENSE_RANK、NTILE)简介

排名函数是Sql Server2005新增的功能&#xff0c;下面简单介绍一下他们各自的用法和区别。我们新建一张Order表并添加一些初始数据方便我们查看效果。表结构和初始数据Sql附上表结构和初始数据图&#xff1a;一、ROW_NUMBERrow_number的用途的非常广泛&#xff0c;排序最好用他…

git2.29.2.2怎么安装_MySQL5.5怎么安装

安装MySQL5.5的步骤&#xff1a;1、 官网下载mysql5.5下载地址&#xff1a;http://dev.mysql.com/downloads/mysql/5.5.html#downloads2、 安装mysql5.5注意&#xff0c;安装之前&#xff0c;请关闭杀毒软件。1)、 打开下载的mysql-5.5.53-winx64.msi2) 、点击下一步3)、 选中复…

h、cpp和hpp头文件之间使用区别

hpp&#xff0c;其实质就是将.cpp的实现代码混入.h头文件当中&#xff0c;定义与实现都包含在同一文件&#xff0c;则该类的调用者只需要include该hpp文件即可&#xff0c;无需再将cpp加入到project中进行编译。而实现代码将直接编译到调用者的obj文件中&#xff0c;不再生成单…

未声明spire。它可能因保护级别而不可访问_信息系统安全:访问控制技术概述...

1.访问控制基本概念身份认证技术解决了识别“用户是谁”的问题&#xff0c;那么认证通过的用户是不是可以无条件地使用所有资源呢&#xff1f;答案是否定的。访问控制(Access Control)技术就是用来管理用户对系统资源的访问。访问控制是国际标准ISO7498-2中的五项安全服务之一&…

c++反汇编与逆向分析技术揭秘_C++反汇编与逆向分析技术揭秘

一、单类继承在父类中声明为私有的成员&#xff0c;子类对象无法直接访问&#xff0c;但是在子类对象的内存结构中&#xff0c;父类私有的成员数据依然存在。C语法规定的访问限制仅限于编译层面&#xff0c;在编译过程中进行语法检查&#xff0c;因此访问控制不会影响对象的内存…

std::atomic原子操作

第十一节std::atomic原子操作_HITXJ的博客-CSDN博客_std::atomic用法

mysql 列级权限授予用户_mysql 用户及权限管理 小结

MySQL 默认有个root用户&#xff0c;但是这个用户权限太大&#xff0c;一般只在管理数据库时候才用。如果在项目中要连接 MySQL 数据库&#xff0c;则建议新建一个权限较小的用户来连接。在 MySQL 命令行模式下输入如下命令可以为 MySQL 创建一个新用户&#xff1a;新用户创建完…

python if name main 的作用_Python中if __name__ == __main__: 的作用

在很多python脚本中在最后的部分会执行一个判断语句if __name__ "__main__:"&#xff0c;之后还可能会有一些执行语句。那添加这个判断的目的何在&#xff1f; 在python编译器读取源文件的时候会执行它找到的所有代码&#xff0c;而在执行之前会根据当前运行的模块是…

php与mysql列表_PHP+Mysql+jQuery实现的查询和列表框选择

本篇文章主要介绍PHPMysqljQuery实现的查询和列表框选择&#xff0c;感兴趣的朋友参考下&#xff0c;希望对大家有所帮助。本文讲解如何通过ajax查询mysql数据&#xff0c;并将返回的数据显示在待选列表中&#xff0c;再通过选择最终将选项加入到已选区&#xff0c;可以用在许多…

range函数python2和3区别_range函数python2和3区别

range函数是一个用来创建算数级数序列的通用函数&#xff0c;返回一个[start, start step, start 2 * step, ...]结构的整数序列&#xff1b;py2中的range()函数用法&#xff1a;&#xff08;推荐学习&#xff1a;Python视频教程&#xff09; range()返回的是一个列表>>&…

Unity SRP自定义渲染管线 -- 2.Custom Shaders

本章将接着上一篇文章&#xff0c;在初步实现一个渲染管线后来创建自定义的shader。上一篇文章的链接 https://blog.csdn.net/yinfourever/article/details/90516602。在本章中&#xff0c;将完成以下内容&#xff1a; 写一个HLSL Shader定义constant buffer&#xff08;常量缓…

tcp 三次握手与四次挥手_TCP三次握手与四次挥手详解

TCP报文结构源端口和目的端口&#xff1a;各占2个字节&#xff0c;分别写入源端口号和目的端口号。序号&#xff1a;占4个字节。序号使用mod运算。TCP是面向字节流的&#xff0c;在一个TCP连接中传送的字节流中的每一个字节都按顺序编号。故该字段也叫做“报文段序号”。确认序…

网关和路由器的区别_5G工业路由器与5G DTU的区别介绍详解

5G工业路由器和5G DTU都是实现无线网络数据传输功能&#xff0c;而两者间的区别主要从使用方法、外观接口以及应用环境等方面区分&#xff0c;今天给大家介绍5G工业路由器和5G DTU的一些不同点。使用方法的不同:5G工业路由器&#xff1a;5G路由器可对以太网、现场总线通信协议进…

7628刷breed_自制各类路由原厂直刷Breed的文件,无需修改mac无需重刷无线

本帖最后由 showme99 于 2017-3-25 16:35 编辑在原厂页面直接选择相应的刷机文件刷机&#xff0c;文件很小256K&#xff0c;大约十秒左右就自动进入Breed后直接刷入dd-wrt,opentwrt,gargoyle等固件即可。无需在Breed里设置MAC地址&#xff0c;也无需刷入ART无线文件&#xff0c…

c语言获取系统剩余内存_C语言编程中的“堆”和“栈”七大不同之处

更多精彩&#xff0c;请点击上方蓝字关注我们&#xff01;对于编程初学者来说会接触到一些难以理解的名称&#xff0c;比如堆(heap)、栈(stack)、堆栈(stack)等。初学开发过程中往往让人混淆不清。今天我们来谈谈堆和栈的具体区别&#xff0c;来帮助初学者理清思路。堆和栈的区…

sql between包括两端吗_SQL大全

作者&#xff1a;静默虚空排版&#xff1a;MarkerHub原文&#xff1a;https://juejin.im/post/5c7e524af265da2d914db18f本文针对关系型数据库的一般语法。限于篇幅&#xff0c;本文侧重说明用法&#xff0c;不会展开讲解特性、原理。一、基本概念数据库术语数据库(database) -…

date oracle 显示毫秒_Oracle中根据Date型转换成Java对应的long型毫秒数

在Java开发中&#xff0c;很多时候我们为了方便会直接使用long型来保存时间&#xff0c;可以通过System.currentTimeMillis()或者是java.util.Date.getTime()来获取&#xff1b;取值为当前日期时间与1970-01-01相差的毫秒数&#xff1b;但是在Oracle里面&#xff0c;默认没有直…