vue3.0的 v-model 为啥不好用了?
时间:2022-07-24
本文章向大家介绍vue3.0的 v-model 为啥不好用了?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
vue3.0还支不支持v-model了?
vue3.0 的beta版出来后就想尝个鲜,顺便实现以下我的想法,于是开整。前面各种折腾就不说了。开始弄自定义组件。
自定义了一个input,但是按照vue2.X的方式设置v-model的时候居然不好用了,各种检查代码没问题。只好先改成属性+事件监听的方式,但是这也不方便呀,于是开始各种查资料。
新鲜事物资料特别少,查了半天也没弄明白,有说不支持了,有说改写法了,各种尝试还是不好使。又找到一个原版英文资料,似乎要加冒号,但是冒号后面怎么写不知道,好吧是我英文太烂看不懂。
直到在B站找到了一个视频,终于解决了问题。vue3.0的v-model的变化
vue2.0的v-model
emmmm,算了不写了,大家都知道。如果不清楚的话,可以看上面的连接。
vue3.0 的v-model的写法
2.0想要支持多属性的话,需要使用.sync。 3.0为了让自定义组件可以更好的支持多个属性(可能吧),做了一点点修改,去掉了.sync,给v-model加了个冒号。
v-model:name="name" v-model:age="age"
冒号后面是内部组件的属性的名称,后面跟的是实体类的属性。而组件内部的事件要改一下。
this.$emit('update:name', event.target.value)
每一个dom写一个input事件,设定好属性名称。
如果我的组件只有一个属性怎么办,还要写冒号吗?当然不需要,vue怎么会增加我们的麻烦呢。只需要设置默认属性名就行。 内部组件使用 modelValue 作为属性名称,外部就可以像vue2.0那样使用v-model了
内部组件
<input type="text" :value="modelValue" @input="textInput" >
export default {
name: 'nf-form-input',
props: {
modelValue: String,
meta: Object
},
methods: {
textInput: function (e) {
this.$emit('update:modelValue', event.target.value)
}
}
}
外部调用
<nfInput v-model="name" /> {{title}}
vue 3.0 beta 测试通过
one more thing
基础问题搞定了,可以开始我的文档驱动系列了。
- ubuntu mysql启动|停止|重启
- JDK1.8源码(四)——java.util.Arrays 类
- JDK1.8源码(三)——java.lang.String 类
- JDK1.8源码(二)——java.lang.Integer 类
- Java关键字——instanceof
- 【强势推荐】一款可扫描CVE的工具
- Java的深拷贝和浅拷贝
- Java关键字——native
- JDK1.8源码(一)——java.lang.Object类
- Java数据结构和算法(十四)——堆
- Java数据结构和算法(十五)——无权无向图
- Java数据结构和算法(十三)——哈希表
- Java数据结构和算法(十二)——2-3-4树
- UDF编程操作实现
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法