Vue3实现自定义Input组件的示例详解
更新时间：2024年03月19日 09:18:30 作者：田本初123
这篇文章主要为大家详细介绍了如何使用Vue3自定义实现一个类似el-input的组件,可以v-model双向绑定,感兴趣的小伙伴可以跟随小编一起学习一下
实现一个类似el-input的组件，可以v-model双向绑定。
v-model作用于组件时，相当于
<template> <MyInput v-model="user_name" /> <MyInput :modelValue="user_name" @update:modelValue="user_name = $event" /> </template>
父组件
<template>
<MyInput v-model="user_name" />
</template>
<script setup lang="ts" name="Home123">
import { ref } from "vue"
import MyInput from "./MyInput.vue"
let user_name = ref("")
</script>
<style scoped></style>
自定义Input组件
<template>
<input
type="text"
:value="modelValue"
@input="emits('update:modelValue', (<HTMLInputElement>$event.target).value)"
/>
</template>
<script setup lang="ts" name="MyInput123">
defineProps(["modelValue"])
let emits = defineEmits(["update:modelValue"])
</script>
<style scoped>
input {
width: 200px;
height: 40px;
background-color: antiquewhite;
border: 1px solid #efefef;
border-radius: 5px;
}
</style>
v-model默认以 :modelValue 以及 @update:modelValue 两步实现。
如果绑定多个v-model就需要自定义属性名，可以在v-model后添加 :属性名
<template> <MyInput v-model:user="user_name" /> </template>
子组件中将原先modelValue变为自定义属性名
<template>
<input
type="text"
:value="user"
@input="emits('update:user', (<HTMLInputElement>$event.target).value)"
/>
</template>
<script setup lang="ts" name="MyInput123">
defineProps(["user"])
let emits = defineEmits(["update:user"])
</script>
子组件中Input的 $event 是什么，以及什么时候可以.target。
对于原生事件来说, $event就是事件对象，所以可以.target。
对于自定义事件来说, $event就是触发事件时，所传递的数据。
到此这篇关于Vue3实现自定义Input组件的示例详解的文章就介绍到这了,更多相关Vue3自定义Input组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了使用vue-touch报priority错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
在Vue项目中,大文件直接上传会面临请求超时、浏览器卡死等问题,本文基于Vue3+Node.js实现企业级完整版,代码精简可直接运行,无复杂第三方依赖,有需要的可以了解下2026-04-04
Computed 计算属性是 Vue 中常用的一个功能，本篇文章主要介绍了Vue Computed 计算属性原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
在Vue项目中,Axios是一个非常流行的HTTP客户端,用于发送请求和接收响应,Axios拦截器是Axios的一个强大功能,它允许你在请求发送之前和响应返回之后对请求和响应进行处理和拦截,本文将结合实际案例,详细介绍如何在Vue中使用Axios拦截器,需要的朋友可以参考下2024-12-12
这篇文章教大家如何分分钟玩转Vue.js组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
vue提倡的是在方法中只有对数据的处理，所以提供了事件修饰符用于DOM的事件处理，下面这篇文章主要给大家介绍了关于Vue自定义组件使用事件修饰符的相关资料,需要的朋友可以参考下2021-05-05
文章介绍了优化前端项目性能的几种方法,包括减小打包体积、异步加载、使用CDN、路由懒加载和组件异步加载等,以提升首屏加载速度和用户体验2025-12-12
Vue + Vite项目通过/dist子路径访问首页空白问题的完整分析与解决方案
在前端工程化实践中,将Vue应用构建后部署到 Nginx是一件再常见不过的事情,然而,当项目需要以子路径形式部署时,却经常会遇到页面能访问,但首页内容为空白,本文将围绕通过域名/dist/访问 Vue+Vite项目首页空白这一典型问题,并给出一套完整、可复用的解决方案2026-01-01
这篇文章主要为大家详细介绍了vue-router原理并实现一个小demo，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
在vue项目中有时会使用到Base6464转码,现将自己使用的一种方法记录下来,对vue使用Base64相关知识感兴趣的朋友一起看看吧2024-02-02
最新评论