vue3 modelvalue

<template>
  <input v-model="localValue" @input="updateValue" />
</template>

<script>
export default {
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      localValue: this.modelValue
    };
  },
  watch: {
    modelValue(newVal) {
      this.localValue = newVal;
    }
  },
  methods: {
    updateValue(event) {
      this.$emit('update:modelValue', event.target.value);
    }
  }
};
</script>

解释说明：

1. Props (modelValue)：这是父组件传递给子组件的值，用于双向绑定。
2. Data (localValue)：在子组件中使用一个局部变量 localValue 来存储和显示输入框的值。初始值为 modelValue。
3. Watch (modelValue)：监听 modelValue 的变化，确保当父组件更新 modelValue 时，子组件的 localValue 也会同步更新。
4. Methods (updateValue)：当用户输入时，触发 updateValue 方法，通过 $emit 触发父组件的 update:modelValue 事件，将新的值传递回父组件。

这样可以实现 Vue 3 中的双向绑定效果。