v-model 默认情况下只会接受 value 属性和响应 input 事件。 因为 v-model 本身是基于 input 输入框定制的， value 是 input 内部定制的绑定值的属性， input 方法是输入框值改变触发的事件。
所以我们只需要记住两点：
1.绑定的值value
2.触发的input事件
1。局部变量观察者
<!-- BaseInput.vue -->
<template>
<input type="text" v-model="model" />
</template>
<script>
export default {
props: {
value: {
type: String,
default: ''
}
},
data() {
return {
model: this.value
}
},
watch: {
model(currentValue) {
this.$emit('input', currentValue)
}
}
}
</script>
<!-- Utilização -->
<BaseInput v-model="text" />
2\。自定义方法
<!-- BaseInput.vue -->
<template>
<input type="text" :value="value" @input="onInput" />
</template>
<script>
export default {
props: {
value: {
type: String,
default: ''
}
},
methods: {
onInput(event) {
this.$emit('input', event.target.value)
}
}
}
</script>
<!-- Utilização -->
<BaseInput v-model="text" />
3\。计算属性“Anabolized”
<!-- BaseInput.vue -->
<template>
<input type="text" v-model="model" />
</template>
<script>
export default {
props: {
value: {
type: String,
default: ''
}
},
computed: {
model: {
get() {
return this.value
},
set(value) {
this.$emit('input', value)
}
}
}
}
</script>
<!-- Utilização -->
<BaseInput v-model="text" />
4\。自定义道具和事件(VueJS 2)
<!-- BaseInput.vue -->
<template>
<input type="text" :value="text" @input="onInput" />
</template>
<script>
export default {
model: {
prop: 'text',
event: 'update'
},
props: {
text: {
type: String,
default: ''
}
},
methods: {
onInput(event) {
this.$emit('update', event.target.value)
}
}
}
</script>
<!-- Usage -->
<BaseInput v-model="text" />
