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

最新推荐文章于 2024-04-18 16:58:47 发布
最新推荐文章于 2024-04-18 16:58:47 发布
阅读量3.7k 收藏 2
点赞数 2
分类专栏： Vue 文章标签： vue.js 前端 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45745641/article/details/121526107
版权
实现自定义input组件的v-model属性前言第一步第二步效果前言使用过一些ui框架的同学应该都知道input里面的值有一个绑定的v-model属性，这篇文章教大家如何给自己定义的input组件写一个v-model的绑定属性第一步创建名为modelValue的属性：props: { modelValue: String },第二步在更新值的时候要发送一个名为update:modelValue的事件const updateValue = (e: KeyboardEvent)
摘要由CSDN通过智能技术生成

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

前言

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

第一步

创建名为modelValue的属性：

props: {
   
    modelValue: String
  },

第二步

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

const updateValue = (e: KeyboardEvent) =>
最低0.47元/天 解锁文章
Beiyux
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue3+TS项目中v-model语法糖使用
Jolly_zhang的博客
08-02 444
Vue3+TS项目中v-model语法糖使用
vue3+ts 组件封装，以及如何封装一个v-model双向绑定的值
小先生编程
12-28 1572
通过defineProps定义该组件的入参，它在初始化时执行一次，参数在组件内是只读的，不能被修改，想要修改它，就必须将它赋值给一个变量，在组件中操作该变量即可。由于prop的参数只执行一次，当外部的值发生改变时，组件内的值并没有改变，这里需要将值实时监听，并做同步。父组件向子组件传值，可通过。3.watch监听器。
vue3【实用教程】v-model（含给 v-model 添加参数，绑定多个 v-model ，v-model 的内置修饰符，自定义 v-model 的修饰符等）
最新发布
朝阳39的博客
04-18 3412
以为例：自动将第一个字母转为大写具体实现详见注释-- 选项式 API --> < script > export default {props : {modelValue : String , // 新增了名 modelModifiers 的 prop，用于获取自定义的修饰符 modelModifiers : {
vue3 update:modelValue 线上环境报错modelValue is not defined
runOnWay的博客
03-28 6483
在使用vue3进行开发子组件显示隐藏时，我们在父组件中给子组件传递v-model:visible来标识子组件的显隐。 一般情况，父组件中代码为如下： <Child v-model="drawerVisible" ... /> 子组件，一般使用el-plus中的drawer或modal等弹出框，以下以el-drawer为例 <template> <el-drawer v-model="visible" title="..." directi
vue中使用ts时 @Model的作用
weixin_48986139的博客
01-22 8868
vue中使用ts时 @Model的作用 在开发vue项目时 里面的ts文件 可以看到@model 这个也是双向数据绑定 相当于v-model 还是用代码来展示一下 首先是子组件 <template> <div> <h1>child-component</h1> <input type="text" :value="value" @input="changed"/> </div> <
Vue3 v-model的使用
秋秋小事
03-20 705
inputvalue最新的值为 = {{ inputString }}</div></div>
vue3-clipboard:for Vue 3的剪贴板.js绑定
04-28
vue3剪贴板 Vue 3的绑定。 该存储库是Inndy用于Vue3的插件的端口。 安装 npm install --save @soerenmartius/vue3-clipboard 用法 全局导入v-clipboard指令 src/main.ts ... input v - model = "value" /
详解vue v-model
10-14
3. v-model与计算属性与侦听器的结合在Vue中，`v-model`可以与计算属性和侦听器配合使用，实现更复杂的双向数据绑定。例如，你可以用计算属性来处理`v-model`的值，或者在侦听器中响应`v-model`的变化，执行相应的...
Vue+element+cookie记住密码功能的简单实现方法
10-14
总之，实现Vue+Element+Cookie的记住密码功能，需要理解Vue.js的响应式数据绑定、事件处理，以及如何使用Element UI构建表单，同时还需要掌握Cookie管理和加密算法。通过这些技术，我们可以为用户提供一个便捷且安全...
vue自定义表单生成器form-create使用详解
10-16
3. **生成表单** - 在模板中使用 `<form-create>` 标签，通过 `v-model` 绑定表单实例对象 `$f`，并传入 `rule` 规则： ```html <form-create v-model="$f" :rule="rule" @on-submit="onSubmit"></form-create> ...
vue3-form-usage：使用vue3的表单用法
02-07
这样，你就可以在父组件中使用`v-model`来同步自定义组件的值。 5. **Form 表单提交**: Vue3提供了一个`v-on`的简写`@`来监听事件，所以你可以像这样处理表单提交： ```html <!-- 表单元素 --> ``` `...
v-model使用及原理
dayexiaofan的博客
05-22 3143
其他人的文章要么就写的vue2，要么就vue3，这里参照官网和其他博客整理一下。
vue获取input的属性_Vue 获取自定义属性的值
weixin_29485605的博客
02-22 2321
在jquery中，如果要获取 data-***的值可以通过$('目标元素').data('属性名')来获取。在Vue中如何获取该值呢？1.换个思路，作为参数传递。如下代码：say himethods: {say(message){console.log(message)}}2.通过e.target.dataset.*** 或者e.target.getAttribute('data-***')...
自定义组件的v-model（v-model的实现原理）
热门推荐
weixin_43912081的博客
09-19 1万+
自定义组件的v-model 组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。 按照Vue官网介绍，Vue的双向绑定是一种语法糖。本质上是 “负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。” <input v-model="parentData"> 等价于： <input :value="parentData" @input="parentData = $event.target.value" >
vue3(ts)类型“EventTarget”上不存在属性“value”
Gaojuncheng112的博客
04-17 5778
e.target在ts下的类型断言
Vue3 + Directive input元素绑定指令后，在指令中更新input value，v-model未生效
jiaweiliao的博客
01-17 2985
v-model未生效其实（:value绑定的变量未更新）其实就是在指令中改变输入框value时未触发“@input”事件，导致v-moel未生效。可利用dispatchEvent方法收到触发input事件，使v-model生效，更新变量。
Vue3 仿知乎项目实战（二） —— 抽象验证规则、vue2/3 自定义组件的 v-model 对比、使用 $attrs 支持默认属性、表单插槽、自定义组件父子传值 mitt
Lyrelion的博客
02-18 772
表单分析 ValidateInput - 抽象验证规则 RuleProp：单条验证规则，包含了： 类型（比如 空值检测、邮箱检测、密码检测等验证规则类型） 类型对应的错误时的提示信息 RulesProp：验证规则组，一个输入框可能不止一个验证规则，而输入框就应该接受 验证规则组类型的参数rules: Array as PropType<RulesProp> 比如：判断是否为空并且符合邮箱格式，这就是两个验证规则 inputRef：输入框的绑定信息，包含了： 输入框值 ...
quasar vue3 input绑定多个v-model值
前端小白到专家的博客
09-28 1680
在quasar中使用vue3,数组大小未知，需要动态绑定input数值，来让用户输入。
Vue3+TS实现自定义input组件的验证功能
weixin_45745641的博客
11-25 2262
自定义组件input输入框的验证前言创建组件App.vue效果展示 前言 关于input的组件，其中有一个必不可少的属性就是输入验证，这篇文章教大家如何给自己定义的input组件添加验证，以邮箱输入框为例，大家学会了可以自行拓展 创建组件 新建一个组件，创建基本代码 这里定义的emailReg是邮箱规范验证的正则表达式 <template> <h1> </h1> </template> <script lang="ts"> import
vue3+ts中 实现v-model:username
04-26
可以通过在组件中使用`v-model`指令来实现双向数据绑定。在 Vue3 中，可以使用 TypeScript 类型来定义一个组件的 prop 和 data。 具体实现方法如下： 1. 在组件中定义一个`username`的 prop，类型为`string`。 ``` props: { username: { type: String } }, ``` 2. 在组件中定义一个 emit 事件，将组件内部的`username`状态改变时的值，通过该事件发送给父组件。 ``` methods: { updateUsername(event: Event) { this.$emit('update:username', (event.target as HTMLInputElement).value); } } ``` 3. 在模板中使用`v-model`指令将组件内部的`username`状态和父组件传入的`username` prop 进行绑定。 ``` <template> <input type="text" v-model="username" @input="updateUsername"> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ props: { username: { type: String } }, methods: { updateUsername(event: Event) { this.$emit('update:username', (event.target as HTMLInputElement).value); } } }); </script> ``` 上述代码中，当在父组件中使用该组件时，可以通过`v-model`指令将组件内部的`username`状态和父组件中的`username` prop 绑定起来。 例如： ``` <template> <div> <CustomInput v-model:username="username" /> <p>{{ username }}</p> </div> </template> <script> import { defineComponent, ref } from 'vue'; import CustomInput from './CustomInput.vue'; export default defineComponent({ components: { CustomInput }, setup() { const username = ref(''); return { username }; } }); </script> ``` 上述代码中，当用户在 `CustomInput` 组件中输入内容时，`username` 的值会同步更新，最终在父组件中渲染出来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Beiyux

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值