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" />
posted @ 2023-08-30 16:44  Amnesia_999  阅读(427)  评论(0编辑  收藏  举报