前言

使用过一些ui框架的同学应该都知道input里面的值有一个绑定的v-model属性，这篇文章教大家如何给自己定义的input组件写一个v-model的绑定属性

第一步

创建名为modelValue的属性：

props: {modelValue: String},

第二步

在更新值的时候要发送一个名为update:modelValue的事件

const updateValue = (e: KeyboardEvent) => {const targetValue = (e.target as HTMLInputElement).valueinputRef.val = targetValuecontext.emit('update:modelValue', targetValue)}

详解：

KeyboardEvent事件对象用来监听键盘的输入
拿到当前 input 里面的值 targetValue
将 inputRef.val 的值更新为 targetValue
最后在 context.emit 中写入 update:modelValue事件

注意在使用context.emit之前要在setup中添加第二个参数context

setup(props, context) {const inputRef = reactive({val: props.modelValue || '',error: false,message: ''})const updateValue = (e: KeyboardEvent) => {const targetValue = (e.target as HTMLInputElement).valueinputRef.val = targetValuecontext.emit('update:modelValue', targetValue)}
}

效果

组件写完之后直接在app.vue里面使用就可以了
导入ref ：

import { defineComponent, reactive, ref } from 'vue'

然后在setup（）中定义

const emailVal = ref('viking')

在输入框添加v-model属性，并在下面绑定值

输入框输入数字，下面内容也能显示对应的值

两步教你用Vue3+TS实现input组件的v-model属性相关推荐

分享一个基于Vue3+TS构建Cesium组件库
分享一个基于Vue3+TS构建Cesium组件库点击进入 Vue Cesium官网 //vc-navigation <template><el-row ref="view ...
只需两步,教你正确识别百度蜘蛛
经常听到站长们问,百度蜘蛛是什么?最近百度蜘蛛来的太频繁服务器抓爆了,最近百度蜘蛛都不来了怎么办,还有很多站点想得到百度蜘蛛的IP段,想把IP加入白名单,但IP不固定,这些百度方面并未透露相关信息. ...
两步教你Linux修改主机名
Linux修改主机名,网上许多教程写的都比较复杂,什么又要修改网络配置.hosts等. 实际上Linux修改主机名可简单通过如下两步完成: 1.临时性修改Linux主机名:hostname 新主机名 ...
github的python代码怎么跑_python程序员一步两步教你使用GitHub！
作为一个Python爬虫师一步步教你们怎么把代码放入到github 中! 首先呢我们下载一个git的客户端学习Python中有不明白推荐加入交流群号: 前面548中间377后面875 群里有志同道合 ...
放大缩小不习惯？只需两步教你solid works如何设置反转滚轮缩放
第一步,打开设置第二步,在 "设置-视图" 中勾选 "反转鼠标滚轮缩放方向"最后点击确定 OK,现在缩放视图就更适合大部分人的习惯了.
扔掉U盘：两步教你如何使用硬盘装系统（适用gpt磁盘）
原文地址:https://www.ithome.com/html/win10/303302.htm 很多同学在安装系统的时候习惯先把系统镜像刻录到U盘里,这样不仅不方便,U盘里的数据也需清空.如果你想 ...
极客DIY：只用两步教你制作一款可编程键盘 [译]
原文出处: Freebuf黑客与极客对于那些工作时需要与许多组合键打交道的人(比如经常使用Photoshop的人)来说,一款可编程键盘无疑是十分实用的.本期的DIY将为大家带来一款可编程键盘,其制 ...
mapbox进不去_Tableau 地图 | 两步教你用Mapbox
继续昨天的地图主题,今天来聊聊如何能做更好看的地图,那就是:Mapbox (如果你是手机看的话,下边的gif点开后才可以看到动图) 这个回答写了关于GIF的情况先说历史 2008年8月,Tablea ...
两步教你在Vue中设置登录验证拦截！
Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 今天在做vue和springboot交互的一个项目的时候,想要基于前端实现一些只有登录验证之后才能访问某些页面的操作,所以在这里总结一下实现 ...

两步教你用Vue3+TS实现input组件的v-model属性

实现自定义input组件的v-model属性

前言

第一步

第二步

效果

两步教你用Vue3+TS实现input组件的v-model属性相关推荐

最新文章

热门文章