如何自定義元件的v-model
阿新 • • 發佈:2021-06-11
如果說要MyInput.vue元件,和父元件App.vue中的name聯動
1、MyInput.vue
<template> <div> <input type="textarea" :value='value' @input='(e)=>$emit("input",e.target.value)'> </div> </template> <script> export default { props: ['value'] } </script>
2、App.vue
<MyInput:value="name" @input='name=$event' />
此處,可以使用v-model='name'替換 :value='name' @input='name=$event',即:
<MyInput v-model="name" />
那如果要定義一個MyCheckbox元件呢?
1、MyCheckbox.vue
<template> <div> <input type="checkbox" :checked='checked' @change='(e)=>$emit("change",e.target.checked)'>選項</div> </template> <script> export default { props: ['checked'] } </script>
2、App.vue
<MyCheckbox :checked='checked' @change="checked=$event" />
如果此處要想使用v-model去替換:checked='checked'@change="checked=$event",即:
<MyCheckbox v-model="checked" />
那麼此時是無效的,因為v-model的預設屬性是value,預設的事件是input,需要在子元件內去自定義v-model的屬性名和事件名
3、MyCheckbox.vue
model: {
prop: 'checked',
event: 'change'
}
此時,<MyCheckboxv-model="checked"/>上的v-mode繫結的屬性為checked,事件為change