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實現(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實現(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ù)
默認使用的是modelValue, 可以自定義參數(shù)名
<MyComponent v-model:title="bookTitle" />
組件實現(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)文章
vue 不使用select實現(xiàn)下拉框功能(推薦)
這篇文章主要介紹了vue 不使用select實現(xiàn)下拉框功能,在文章給大家提到了vue select 組件的使用與禁用，需要的朋友可以參考下2018-05-05
下面小編就為大家分享一篇vue獲取當前激活路由的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
VUE UPLOAD 通過ACTION返回上傳結(jié)果操作
這篇文章主要介紹了VUE UPLOAD 通過ACTION返回上傳結(jié)果操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue調(diào)用swiper插件步驟教程(最易理解且詳細)
有時候我們需要在vue中使用輪播組件,如果是在vue組件中引入第三方組件的話,最好通過npm安裝,從而進行統(tǒng)一安裝包管理,下面這篇文章主要給大家介紹了關(guān)于vue調(diào)用swiper插件的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue攔截器及請求封裝代碼,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細介紹了五種Vue實現(xiàn)加減乘除運算的方法,文中的示例代碼簡潔易懂,對我們深入了解vue有一定的幫助,需要的可以了解下2023-08-08
axios解決高并發(fā)的方法:axios.all()與axios.spread()的操作
這篇文章主要介紹了axios解決高并發(fā)的方法:axios.all()與axios.spread()的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue通過style或者class改變樣式的實例代碼，在文中給大家提到了vue的一些樣式(class/style)綁定,需要的朋友可以參考下2018-10-10
elementui中el-input回車搜索實現(xiàn)示例
這篇文章主要介紹了elementui中el-input回車搜索實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Vue中金額、日期格式化插件@formatjs/intl的使用及說明
這篇文章主要介紹了Vue中金額、日期格式化插件@formatjs/intl的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02