Vue3.js自定義組件 v-model詳解
更新時間：2023年10月19日 14:34:56 作者：彭世瑜
在Vue3 中,v-model是用于創(chuàng)建雙向數(shù)據(jù)綁定的指令,通常,我們使用該指令將任何 HTML 表單元素與一個變量綁定以收集輸入值,本文給大家介紹Vue3.js自定義組件 v-model,感興趣的朋友一起看看吧
Vue3的自定義v-model和vue2稍有不同
文檔
https://cn.vuejs.org/guide/components/v-model.html
原生組件
<input v-model="searchText" />
等價于
<input :value="searchText" @input="searchText = $event.target.value" />
自定義組件
<CustomInput v-model="searchText" />
等價于
<CustomInput :model-value="searchText" @update:model-value="newValue => searchText = newValue" />
CustomInput實(shí)現(xiàn)代碼1
<!-- CustomInput.vue -->
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue']
}
</script>
<template>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</template>CustomInput實(shí)現(xiàn)代碼2
<!-- CustomInput.vue -->
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue'],
computed: {
value: {
get() {
return this.modelValue
},
set(value) {
this.$emit('update:modelValue', value)
}
}
}
}
</script>
<template>
<input v-model="value" />
</template>v-model 的參數(shù)
默認(rèn)使用的是modelValue, 可以自定義參數(shù)名
<MyComponent v-model:title="bookTitle" />
組件實(shí)現(xiàn)
<!-- MyComponent.vue -->
<script>
export default {
props: ['title'],
emits: ['update:title']
}
</script>
<template>
<input
type="text"
:value="title"
@input="$emit('update:title', $event.target.value)"
/>
</template>到此這篇關(guān)于Vue3.js自定義組件 v-model的文章就介紹到這了,更多相關(guān)Vue3 v-model內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Django Vue實(shí)現(xiàn)動態(tài)菜單和動態(tài)權(quán)限
本文主要介紹了Django Vue實(shí)現(xiàn)動態(tài)菜單和動態(tài)權(quán)限，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue實(shí)現(xiàn)大文件分片上傳與斷點(diǎn)續(xù)傳到七牛云
這篇文章介紹了vue實(shí)現(xiàn)大文件分片上傳與斷點(diǎn)續(xù)傳到七牛云的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
vue點(diǎn)擊右鍵出現(xiàn)自定義操作菜單實(shí)現(xiàn)代碼
這篇文章主要給大家介紹了關(guān)于vue點(diǎn)擊右鍵出現(xiàn)自定義操作菜單實(shí)現(xiàn)的相關(guān)資料,在網(wǎng)頁中我們也希望可以像桌面軟件一樣,點(diǎn)擊右鍵后出現(xiàn)操作菜單,對選中的數(shù)據(jù)項(xiàng)進(jìn)行相應(yīng)的操作,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)時間軸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了Vue自定義指令詳解,需要的朋友可以參考下2022-12-12
vue-cli3.0如何使用CDN區(qū)分開發(fā)、生產(chǎn)、預(yù)發(fā)布環(huán)境
這篇文章主要介紹了vue-cli3.0如何使用CDN區(qū)分開發(fā)、生產(chǎn)、預(yù)發(fā)布環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue flex 布局實(shí)現(xiàn)div均分自動換行的示例代碼
這篇文章主要介紹了vue flex 布局實(shí)現(xiàn)div均分自動換行,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了深度了解vue.js中hooks的相關(guān)知識，生命周期鉤子提供了一些 方法 ，因此你可以在組件生命周期的不同時刻精確地觸發(fā)某些操作。當(dāng)我們將組件實(shí)例化時，組件會被創(chuàng)建，反之會被銷毀。,需要的朋友可以參考下2019-06-06
Vue項(xiàng)目如何根據(jù)圖片url獲取file對象并用axios上傳
這篇文章主要介紹了Vue項(xiàng)目如何根據(jù)圖片url獲取file對象并用axios上傳問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
當(dāng)vue路由變化時,改變導(dǎo)航欄的樣式方法
今天小編就為大家分享一篇當(dāng)vue路由變化時,改變導(dǎo)航欄的樣式方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08