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,一经查实,立即删除!

相关文章

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

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

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

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

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

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

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

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

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

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

std::atomic原子操作

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

sql between包括两端吗_SQL大全

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

python交互模式什么意思_Python中的交互模式是什么

让开发者能快速学习、测试 Python 的各种功能,Python 提供的“python”命令不仅能用于运行 Python 程序,也可作为一个交互式解释器一一开发者逐行输入 Python 代码,它逐行解释执行。 当输入“python”命令时,可以看到如下输出结果…

idea创建springboot项目+mybatis_Spring Boot + MyBatis 多模块项目搭建教程

Java后端,选择“”优质文章,及时送达作者 | 枫本非凡链接 | cnblogs.com/orzlin/p/9717399.html上篇 | IDEA 远程一键部署 Spring Boot 到 Docker一、前言最近公司项目准备开始重构,框架选定为SpringBootMybatis,本篇主要记录了在…

下载nodejs的mysql安装包下载安装_Node.js安装 下载

1、安装Node.jshttps://nodejs.org/en/安装步骤:点击安装包按提示进行安装Node.js 安装配置本章节我们将向大家介绍在 Windows 和 Linux 上安装 Node.js 的方法。本安装教程以 Node.js v4.4.3 LTS(长期支持版本)版本为例。你可以根据不同平台系统选择你需要的 Node.…

redistemplate注入为null_Windows DLL 注入技术

Windows DLL 注入技术 本文主要介绍四种常见的 Windows DLL 注入技术。分别为全局钩子、远线程钩子、突破 SESSION 0 隔离的远线程注入和 APC 注入。全局钩子注入Windows 中大部分应用是基于 Windows 的消息机制,Windows提供截获这些消息的钩子函数。根据钩子作用的…

nginx location 正则表达式匹配多个地址_就是要让你搞懂Nginx,这篇就够了!

Nginx 是一个高性能的 HTTP 和反向代理服务器,特点是占用内存少,并发能力强,事实上 Nginx 的并发能力确实在同类型的网页服务器中表现较好。Nginx 专为性能优化而开发,性能是其最重要的要求,十分注重效率,有…

mysql查询网址_bootstrap+flask+mysql实现网站查询

之前那篇文章是flaskredis的,如果用flaskmysql怎么实现呢?创建数据库:CREATE DATABASE web12306 DEFAULT CHARACTER SET utf8;创建表:CREATE TABLE web12306 (user_email varchar(100) NOT NULL DEFAULT ,user_pass varchar(100)…