modelValue

modelValue是Vue.js 3.x中的一个重要概念，用于实现组件的双向数据绑定。当在父组件中使用v-model指令绑定一个子组件时，子组件需要声明一个modelValue属性来接收这个绑定值。同时，子组件还需要通过$emit方法触发一个名为update:modelValue的事件，来通知父组件绑定值的变化。

以下是一个简单的示例，展示了如何在子组件中使用modelValue来实现双向数据绑定：

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

 

在这个示例中，子组件接收了一个名为modelValue的属性，并将其绑定到一个输入框的value属性上。当输入框的值发生变化时，子组件通过$emit方法触发一个update:modelValue事件，并将新的值作为参数传递给父组件。这样，父组件就可以实时地获取到子组件中输入框的值，实现了双向数据绑定。

需要注意的是，modelValue并不是Vue.js的官方API，而是由开发者自定义的一个属性名。但是，由于它在实现双向数据绑定时非常常见且重要，因此被广泛地采用和接受。同时，Vue.js也提供了一些内置的机制来简化双向数据绑定的实现，如使用.sync修饰符等。