一扣墩、自定義組件使用 v-model實現(xiàn)雙向數(shù)據(jù)綁定
1.1、單個 v- model 數(shù)據(jù)綁定
默認(rèn)情況下,組件上的 v- model 便用 modelvalue 作為 prop 和 update : modelvalu 作為事件对蒲。
<custom-input v-model="searchText"></custom-input>
app.component('custom-input', {
props: ['modelValue'],
emits: ['update:modelValue'],
template: `
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
`
})
我們可以通過向 v - model 傳遞參數(shù)來修改這些名稱:
<my-component v-model : foo =" bar "></my-component>
在本例中,子組件將需要一 個 foo prop并發(fā)出 update : foo 要同步的事件:
const app = Vue.createApp({})
app.component ('my-component',{
props:{
foo : String
},
template:` < input type ="text" :value =" foo"
@input ="&emit ('update : foo', &event.target.value )">`
})
1.2、多個v- model 綁定
通過利用以特定 prop 和事件為目標(biāo)的能力,正如我們們之前在 v-model參數(shù)中所學(xué)的那樣,我們現(xiàn)在可以在單個組件實例上創(chuàng)建多個 v - model 綁定。
每個 v-model 將同步到不同的 prop ,而不需要在組件中添加額外的選項莫其。
<user-name v-model:first-name ="firstName" v-model:last-name ="lastName" ></user-name >
const app = Vue.createApp({})
app.component ('user-name',{
props:{
firstName : String,
lastName : String,
},
template:` < input type ="text" :value ="firstName"
@input ="&emit ('update : firstName', &event.target.value )"> <br/>
< input type ="text" :value ="lastName"
@input ="&emit ('update : lastName', &event.target.value )">
`
})
