vue3 v-model 默认绑定的是 modelValue
与vue2默认绑定props为value不同,vue3内部默认绑定的是modelValue
在自定义组件或者使用第三方组件时要注意定义值
官方文档:
组件 v-model | Vue.js (vuejs.org)
推荐写法:
定义组件 CustomInput.vue
<script setup>
import { computed } from 'vue'
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const value = computed({
get() {
return props.modelValue
},
set(value) {
emit('update:modelValue', value)
}
})
</script>
<template>
<input v-model="value" />
</template>
使用组件
<CustomInput v-model="searchText" />