Vue3實現(xiàn)自定義Input組件的示例詳解
更新時間：2024年03月19日 09:18:30 作者：田本初123
這篇文章主要為大家詳細介紹了如何使用Vue3自定義實現(xiàn)一個類似el-input的組件,可以v-model雙向綁定,感興趣的小伙伴可以跟隨小編一起學習一下
實現(xiàn)一個類似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 兩步實現(xiàn)。
如果綁定多個v-model就需要自定義屬性名，可以在v-model后添加 :屬性名
<template> <MyInput v-model:user="user_name" /> </template>
子組件中將原先modelValue變?yōu)樽远x屬性名
<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就是觸發(fā)事件時，所傳遞的數(shù)據(jù)。
到此這篇關(guān)于Vue3實現(xiàn)自定義Input組件的示例詳解的文章就介紹到這了,更多相關(guān)Vue3自定義Input組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了使用vue-touch報priority錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue中大文件上傳企業(yè)級實現(xiàn)方案的完整代碼
在Vue項目中,大文件直接上傳會面臨請求超時、瀏覽器卡死等問題,本文基于Vue3+Node.js實現(xiàn)企業(yè)級完整版,代碼精簡可直接運行,無復雜第三方依賴,有需要的可以了解下2026-04-04
Computed 計算屬性是 Vue 中常用的一個功能，本篇文章主要介紹了Vue Computed 計算屬性原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
在Vue項目中,Axios是一個非常流行的HTTP客戶端,用于發(fā)送請求和接收響應(yīng),Axios攔截器是Axios的一個強大功能,它允許你在請求發(fā)送之前和響應(yīng)返回之后對請求和響應(yīng)進行處理和攔截,本文將結(jié)合實際案例,詳細介紹如何在Vue中使用Axios攔截器,需要的朋友可以參考下2024-12-12
這篇文章教大家如何分分鐘玩轉(zhuǎn)Vue.js組件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
vue提倡的是在方法中只有對數(shù)據(jù)的處理，所以提供了事件修飾符用于DOM的事件處理，下面這篇文章主要給大家介紹了關(guān)于Vue自定義組件使用事件修飾符的相關(guān)資料,需要的朋友可以參考下2021-05-05
文章介紹了優(yōu)化前端項目性能的幾種方法,包括減小打包體積、異步加載、使用CDN、路由懶加載和組件異步加載等,以提升首屏加載速度和用戶體驗2025-12-12
Vue + Vite項目通過/dist子路徑訪問首頁空白問題的完整分析與解決方案
在前端工程化實踐中,將Vue應(yīng)用構(gòu)建后部署到 Nginx是一件再常見不過的事情,然而,當項目需要以子路徑形式部署時,卻經(jīng)常會遇到頁面能訪問,但首頁內(nèi)容為空白,本文將圍繞通過域名/dist/訪問 Vue+Vite項目首頁空白這一典型問題,并給出一套完整、可復用的解決方案2026-01-01
深入了解vue-router原理并實現(xiàn)一個小demo
這篇文章主要為大家詳細介紹了vue-router原理并實現(xiàn)一個小demo，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
在vue項目中有時會使用到Base6464轉(zhuǎn)碼,現(xiàn)將自己使用的一種方法記錄下來,對vue使用Base64相關(guān)知識感興趣的朋友一起看看吧2024-02-02