vue3 双向绑定：如何在自定义组件中修改props定义的属性值，并更新父组件绑定的响应式变量值

在Vue 3中，要修改从父组件传递给子组件的props属性并更新父组件的响应式状态，你需要使用.emit方法触发一个自定义事件，并在父组件中监听这个事件来更新数据。

以下是一个简单的例子：

1. 子组件（CustomInput.vue）：

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>
 
<script>
export default {
  props: {
    modelValue: String
  }
}
</script>

2. 父组件：

<template>
  <CustomInput :modelValue="message" @update:modelValue="message = $event" />
</template>
 
<script>
import CustomInput from './CustomInput.vue';
 
export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: 'Hello'
    }
  }
}
</script>

在这个例子中，子组件使用v-model语法糖来创建双向绑定，并在输入框的input事件中触发一个update:modelValue事件，将新值传递给父组件。父组件监听这个事件，并使用$event来更新其本地数据message。这样，无论message如何变化，传递给子组件的props也会更新，实现了数据的双向绑定。