Vue 3 中的 emit(‘update_modelValue‘)：更灵活的双向绑定

在Vue 3中，emit('update_modelValue')是一种自定义事件的方式，用于更新父组件中绑定的modelValue。这种做法是为了实现更灵活的双向数据绑定，使得子组件可以通知父组件更新它的数据。

以下是一个简单的示例，展示如何在Vue 3组件中使用emit('update_modelValue')：

<template>
  <input :value="modelValue" @input="updateModelValue($event.target.value)">
</template>
 
<script>
export default {
  props: {
    modelValue: String, // 定义modelValue作为props
  },
  emits: ['update:modelValue'], // 声明触发的自定义事件
  methods: {
    updateModelValue(value) {
      this.$emit('update:modelValue', value); // 触发自定义事件
    }
  }
}
</script>

在这个例子中，我们创建了一个输入框组件，它接受一个modelValue作为属性，并且在输入框的值发生变化时，通过updateModelValue方法触发update:modelValue事件，将新的值传递给父组件。父组件需要监听update:modelValue事件，并相应地更新它的数据。这样，就实现了从子组件到父组件的数据流，保持了数据的双向绑定。