一文秒懂Vue3的v-model

目录
  • 1：什么是 v-model
  • 2：v-model 的扩展
    • 1：自定义名称
    • 2：内置修饰符
    • 3：自定义修饰符
  • 总结

1：什么是 v-model

v-model 是 Vue 内置的指令
作为属性接收一个变量（不能是常量）绑定到普通组件和自定义组件中

// 作为普通组件的属性, 只有作为表单内的元素属性时才会生效 如：  input  、radio 、checkbox
<template>
	<input v-model='value' />
</template>
// 作为自定义组件的属性
<template>
	<son-component v-model='value'></son-component>
</template>

v-model 同时做了两件事情：属性绑定和自定义事件绑定

// 内置组件
<template>
	<input  type='text' v-model='value' />
	// 相当于
	<input type='text'  :value='value' @input='value = $event.target.value'  />
</template>
// 自定义子组件
<template>
	<son-component v-model='value'></son-component>
	// 相当于
	<son-component :modelValue='value' @update:modelValue='value = $event'></son-component>
<template>

v-model 绑定在自定义组件上时，我们需要手动去接收

// 自定义组件
export default{
	props: ['modelValue'], // 默认名称为 modelValue
	emits: ['update:modelValue'] // Vue3 新增 emits， 用于接收父组件传递的自定义事件
}

2：v-model 的扩展

1：自定义名称

v-model 默认绑定的属性名为：modelValue
v-model 默认绑定的事件名为：update:modelValue

// 所以我们需要使用 modelValue 和 update:modelValue 来接收
export default {
	props: ['modelValue'],
	emits: ['update:modelValue']
}

我们可以自定义 v-model 绑定的名称

// 父组件
<template>
	<son-component v-model:msg='msg'></son-component> // 使用 v-model:name 来自定义名称
</template>
// 子组件
export default {
	props: ['msg'],
	emits: ['update:msg']
}

注意：以上是 Vue3 中接收 v-model 的方法， Vue2 需要使用 model 来接收

2：内置修饰符

v-model 的修饰符能够对绑定的数据做特定处理
Vue 中有内置的修饰符，如：.number 、.trim 、.lazy
v-model.number ： v-model 绑定在表单组件中不会出现数值类型，numer 可以将绑定的字符串转换为数值
v-model.trim ： 去掉绑定数据左右两侧的空格
v-model.lazy ： 表单组件绑定时生效，从原来绑定的 input 高频率触发事件改为 blur 低频率触发事件来提高性能

<template>
	<input type='text' v-model.number='value' /> // 将输入的 string 类型转换为 number 类型
	input 本身不管输入的是数字还是单词等都是 string 类型
</template>

3：自定义修饰符

Vue3 中可以通过 v-model.name 自定义修饰符
自定义的修饰符需要在子组件中用 props 接收 modelModifiers 对象，这个对象下面会有自定义属性，值为 true

// 没有重命名v-model，仅添加自定义修饰符
<template>
	<son-component  v-model.a='msg' />
</template>
export default {
	props:['modelValue', 'modelModifiers'],
	emits: ['update:modelValue'],
	created() {
		console.log(this.modelModifiers.a) // 值为 true
	}
}

如果自定义了 v-model 的名称，那么 modelModifiers 要改为 name + Modifiers

// 重命名 v-model ，并且添加自定义修饰符
<template>
	<son-component v-model:msg.a='msg' />
</template>
export default {
	props:['msg', 'msgModifiers'],
	emits: ['update:msg'],
	created() {
		console.log(this.msgModifiers.a) // 值为 true
	}
}

注意：Vue3 中取消了 v-bind 中的 .sync 修饰符

总结

1：v-model 作为指令可以绑定在内置组件和自定义组件上
2：相当于绑定了 :modelValue 和 @update:modelValue ，需要在子组件中接收
3：v-model:name 重命名
4：v-modle.name 自定义修饰符，使用 props 的 Modifiers 接收

到此这篇关于一文秒懂认识Vue3的v-model的文章就介绍到这了,更多相关Vue3的v-model内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3 SFC 和 TSX 方式自定义组件实现 v-model的详细过程

    目录 1 v-model 1.1 理解 v-model 1.2 案例描述 1.3 编写样式 2 编写组件 2.1 实现思路 2.2 SFC(.vue)中的实现 2.3 TSX(.tsx)中的实现 3 使用组件 1 v-model 1.1 理解 v-model v-model 是 vue3 中的一个内置指令,很多表单元素都可以使用这个属性,如 input.checkbox 等,咱可以在自定义组件中实现 v-model.v-model 本质上是一个语法糖: 绑定父组件传递过来的 modelValue

  • vue3组件中v-model的使用以及深入讲解

    目录 v-model input中使用双向绑定数据 组件中的v-model 其他写法 总结 v-model input中使用双向绑定数据 v-model在vue中我们经常用它与input输入框的输入值进行绑定,简单的实现原理大家也应该都知道 通过v-bind绑定value值 及结合@input输入事件动态改变绑定的value值来实现双向绑定,如下vue3实现代码: <template> <input type="text" :value="tryText&q

  • 浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定

    目录 一.vue2 中 sync 修饰符的功能在 vue3 中如何呈现? 1.sync 修饰符回顾 2.sync 的语法糖功能在vue3中如何编写使用? 二.如何通过v-model实现父子组件的双向数据绑定 1.单个数据双向绑定 2.多个数据双向绑定 - 与单数据绑定差别不大 3.利用 computed 简化父子组件双向数据绑定 一.vue2 中 sync 修饰符的功能在 vue3 中如何呈现? 1.sync 修饰符回顾 1.vue 规则:props 是单向向下绑定的,子组件不能修改 props

  • vue3自定义组件之v-model实现父子组件双向绑定

    vue3自定义组件之v-model实现父子组件双向绑定

    vue3 v-model父子组件双向绑定 vue3.x移除了vue2.x的model选项,自定义组件双向绑定不在使用以下方法: // vue2的v-model双向绑定方法 model: {      prop: 'value', //3.x默认值改为了modelValue      event: 'input' //3.x默认值改为了update:modelValue    }, //使用 this.$emit('input', index); vue3.x采用以下方式(v-model默认对应的

  • vue3的setup语法如何自定义v-model为公用hooks

    目录 前言 基础 基本的v-model 多个v-model绑定 v-model修饰符 进阶 问题背景 方式一:通过watch中转 方式二:computed的get和set 终极:封装v-model的hooks 提取公用逻辑 继续抽离封装 前言 基础篇:简单介绍vue3的setup语法如何自定义v-model: 进阶篇:如何提取v-model语法作为一个公用hooks: 基础 基础篇可绕过,只是对于官网给出的教程,进行了总结概括并给出demo 基本的v-model 子组件中满足两个点,即可完成自定

  • vue3 封装自定义组件v-model的示例

    vue3 封装自定义组件v-model的示例

    首先要注意 vue3中 v-model 默认绑定的变量名变了,从原理的 value 改成了 modelValue,如果要改变变量的值,要执行一个事件 this.$emit("update:modelValue", value); <template> <div class="inline"> <input :type="password ? 'password' : 'text'" ref="input&q

  • vue3实现v-model原理详解

    vue3 源码正式放出来了,想必大家也都开始争先恐后的学习 vue3 的知识了.由于 vue3 已经不再支持 v-model 了,而使用 .sync 来代替,但是为了这篇文章可以帮助大家快速了解 vue 的双向绑定实现原理,部分使用了 vue2.x v-model 的实现原理 proxy 的基础知识,相信大家已经都很了解了,让我们一起来回顾一下吧 proxy 是对一个对象的代理,并返回一个已代理的对象,已代理的对象如果发生任何 set 跟 get 的方法都可以被捕获到,我们写一个简单的 :che

  • 一文秒懂Vue3的v-model

    目录 1:什么是 v-model 2:v-model 的扩展 1:自定义名称 2:内置修饰符 3:自定义修饰符 总结 1:什么是 v-model v-model 是 Vue 内置的指令作为属性接收一个变量(不能是常量)绑定到普通组件和自定义组件中 // 作为普通组件的属性, 只有作为表单内的元素属性时才会生效 如: input .radio .checkbox <template> <input v-model='value' /> </template> // 作为自

  • 一文秒懂Go 编写命令行工具的代码

    一文秒懂Go 编写命令行工具的代码

    前言 最近因为项目需要写了一段时间的 Go ,相对于 Java 来说语法简单同时又有着一些 Python 之类的语法糖,让人大呼"真香". 但现阶段相对来说还是 Python 写的多一些,偶尔还得回炉写点 Java :自然对 Go 也谈不上多熟悉. 于是便利用周末时间自己做个小项目来加深一些使用经验.于是我便想到了之前利用 Java 写的一个博客小工具. 那段时间正值微博图床大量图片禁止外链,导致许多个人博客中的图片都不能查看.这个工具可以将文章中的图片备份到本地,还能将图片直接替换到

  • java中的Arrays这个工具类你真的会用吗(一文秒懂)

    Java源码系列三-工具类Arrays ​ 今天分享java的源码的第三弹,Arrays这个工具类的源码.因为近期在复习数据结构,了解到Arrays里面的排序算法和二分查找等的实现,收益匪浅,决定研读一下Arrays这个类的源码.不足之处,欢迎在评论区交流和指正. 1.认识Arrays这个类: ​ 首先它在java的utils包下,属于Java Collections Framework中的一员.它的初衷就是一个工具类,封装了操纵数组的各种方法,比如排序,二分查找,数组的拷贝等等.满足了我们日常

  • 一文秒懂Java中的乐观锁 VS 悲观锁

    一文秒懂Java中的乐观锁 VS 悲观锁

    乐观锁 VS 悲观锁 悲观锁:总是假设最坏的情况,每次取数据时都认为其他线程会修改,所以都会加锁(读锁.写锁.行锁等),当其他线程想要访问数据时,都需要阻塞挂起. 乐观锁:总是认为不会产生并发问题,每次去取数据的时候总认为不会有其他线程对数据进行修改,因此不会上锁,但是在更新时会判断其他线程在这之前有没有对数据进行修改. 乐观锁在Java中通过使用无锁来实现,常用的是CAS,Java中原子类的递增就是通过CAS自旋实现. CAS CAS全称 Compare And Swap(比较与交换),是一种

  • 一文秒懂vue-property-decorator

    目录 我们来看下页面上代码展示: 1.@Component(options:ComponentOptions = {}) 2.@Prop(options: (PropOptions | Constructor[] | Constructor) = {}) 3,@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {}) 4.@Model(event?: string, options:

  • 一文秒懂python正则表达式常用函数

    导读: 正则表达式是处理字符串类型的"核武器",不仅速度快,而且功能强大.本文不过多展开正则表达式相关语法,仅简要 介绍 python中正则表达式常用函数及其使用方 法,以作快速查询浏览. 01 Re概览 Re模块是python的内置模块,提供了正则表达式在python中的所有用法,默认安装位置在python根目录下的Lib文件夹(如 ..\Python\Python37\Lib).主要提供了3大类字符串操作方法: 字符查找/匹配 字符替换 字符分割 由于是面向字符串类型的模块,就不得

  • 一文秒懂java到底是值传递还是引用传递

    首先回顾一下在程序设计语言中有关将参数传递给方法(或函数)的一些专业术语.按值调用(call by value)表示方法接收的是调用者提供的值,而按引用调用(call by reference)表示方法接收的是调用者提供的变量地址.一个方法可以修改传递引用所对应的变量值,而不能修改传递值调用所对应的变量值. 它用来描述各种程序设计语言(不只是 Java)中方法参数传递方式. Java 程序设计语言总是采用按值调用.也就是说,方法得到的是所有参数值的一个拷贝,也就是说,方法不能修改传递给它的任何参

  • 一文秒懂JavaScript构造函数、实例、原型对象以及原型链

    1概述 ES6, 全称 ECMAScript 6.0 ,2015.06 发版.在ES6之前,对象不是基于类创建的,而是用一种称为构造函数的特殊函数来定义对象和它们的特征. 2构造函数 构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用.我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面. // 利用构造函数创建对象 function Person(uname, age) { this.uname = uname; this.age

  • 一文秒懂C语言/C++内存管理(推荐)

    C 语言内存管理指对系统内存的分配.创建.使用这一系列操作.在内存管理中,由于是操作系统内存,使用不当会造成毕竟麻烦的结果.本文将从系统内存的分配.创建出发,并且使用例子来举例说明内存管理不当会出现的情况及解决办法. 一.内存 在计算机中,每个应用程序之间的内存是相互独立的,通常情况下应用程序 A 并不能访问应用程序 B,当然一些特殊技巧可以访问,但此文并不详细进行说明.例如在计算机中,一个视频播放程序与一个浏览器程序,它们的内存并不能访问,每个程序所拥有的内存是分区进行管理的. 在计算机系统中

  • 一文秒懂Java enum常见的用法讲解

    简介 枚举是Java1.5引入的新特性,通过关键字enum来定义枚举类.枚举类是一种特殊类,它和普通类一样可以使用构造器.定义成员变量和方法,也能实现一个或多个接口,但枚举类不能继承其他类. 一,常量定义 public enum WeekDay { SUN, MON, TUE, WED, THT, FRI, SAT } 二,swich public enum WeekDay { SUN, MON, TUE, WED, THT, FRI, SAT } public class SelectDay{

随机推荐