vue3 组件双向绑定推荐写法

app.vue

默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件。我们可以通过给 v-model 指定一个参数来更改这些名字："message"

<script setup>
import { ref } from 'vue'
import CustomInput from './CustomInput.vue'
  
const message = ref('hello')
</script>

<template>
  <CustomInput v-model:message="message" /> {{ message }}
</template>

CustomInput.vue

<script setup>
import {computed} from 'vue'
const props = defineProps(['message'])
const emit = defineEmits(['update:message'])
const value = computed({
  get(){
    return props.message
  },
  set(val){
    emit('update:message',val)
  }
})
</script>

<template>
  <input
    v-model="value"
  />
</template>

组件 v-model | Vue.js (vuejs.org)