vue3的v-model使用

vue3的v-model使用

• 单个绑定值

子组件

props: [‘modelValue’],
emits: [‘update:modelValue’],
注：modelValue是默认的，如果只有一个需要绑定v-model，可使用modelValue
此时父组件写法

<CustomInput v-model="searchText" />

• 多个绑定值
  绑多个v-model

子组件

  props: ['title1'],
  emits: ['update:title1'，'update:title2']

//使用：
this.$emit('update:title1', value)

//可配合计算属性
 computed: {
    value: {
      get() {
        return this.title1
      },
      set(value) {
        this.$emit('update:title1', value)
      }
    }
  }

父组件
v-model:跟具体的名字

<MyComponent v-model:title1="bookTitle1"   v-model:title2="bookTitle2"/>