Vue3實(shí)現(xiàn)自定義Input組件的示例詳解
實(shí)現(xiàn)一個(gè)類似el-input的組件，可以v-model雙向綁定。
v-model作用于組件時(shí)，相當(dāng)于
<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默認(rèn)以 :modelValue 以及 @update:modelValue 兩步實(shí)現(xiàn)。
如果綁定多個(gè)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 是什么，以及什么時(shí)候可以.target。
對(duì)于原生事件來(lái)說(shuō), $event就是事件對(duì)象，所以可以.target。
對(duì)于自定義事件來(lái)說(shuō), $event就是觸發(fā)事件時(shí)，所傳遞的數(shù)據(jù)。
到此這篇關(guān)于Vue3實(shí)現(xiàn)自定義Input組件的示例詳解的文章就介紹到這了,更多相關(guān)Vue3自定義Input組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue require.context全局注冊(cè)組件的具體實(shí)現(xiàn)
本文主要介紹了vue require.context全局注冊(cè)組件,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
這篇文章主要為大家詳細(xì)介紹了vue3.0實(shí)現(xiàn)下拉菜單的封裝代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue如何實(shí)現(xiàn)跨頁(yè)面?zhèn)鬟f與接收數(shù)組并賦值
這篇文章主要介紹了vue如何實(shí)現(xiàn)跨頁(yè)面?zhèn)鬟f與接收數(shù)組并賦值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue的七種傳值方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
前端Vue學(xué)習(xí)之購(gòu)物車項(xiàng)目實(shí)戰(zhàn)記錄
購(gòu)物車是電商必備的功能,可以讓用戶一次性購(gòu)買多個(gè)商品,下面這篇文章主要給大家介紹了關(guān)于前端Vue學(xué)習(xí)之購(gòu)物車項(xiàng)目的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了Vue編寫(xiě)炫酷的時(shí)鐘插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
element多選表格中使用Switch開(kāi)關(guān)的實(shí)現(xiàn)
當(dāng)在做后臺(tái)管理系統(tǒng)的時(shí)候，會(huì)用到用戶的狀態(tài)管理這個(gè)功能，本文主要介紹了element多選表格中使用Switch開(kāi)關(guān)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
本篇文章主要介紹了詳解Vue雙向數(shù)據(jù)綁定原理解析 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue+echarts實(shí)現(xiàn)動(dòng)態(tài)折線圖的方法與注意
這篇文章主要給大家介紹了關(guān)于vue+echarts實(shí)現(xiàn)動(dòng)態(tài)折線圖的方法與注意事項(xiàng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue項(xiàng)目啟動(dòng)命令個(gè)人學(xué)習(xí)記錄
最近想要學(xué)習(xí)vue,正好看到資料,如何通過(guò)命令創(chuàng)建vue項(xiàng)目的方法,就留個(gè)筆記,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目啟動(dòng)命令的相關(guān)資料,需要的朋友可以參考下2023-02-02