vue3，input事件子组件等父组件确认后再修改值

如果你想实现在子组件中修改父组件的值，但是要等到父组件确认后再进行修改，可以使用`v-model`结合`.lazy`修饰符来实现。

具体来说，你可以在父组件中定义一个`value`变量，将它通过`v-model`绑定到子组件的`value`属性上，同时在子组件中监听`input`事件，将修改后的值通过`$emit`方法传递给父组件的`input`事件，但是不直接修改`value`的值，而是将修改后的值保存在一个`tempValue`变量中。在父组件中监听子组件的`input`事件，将`tempValue`的值保存在一个临时变量中，等到确认后再将临时变量的值赋给`value`变量。

下面是一个示例代码：

父组件中：

<template>
  <div>
    <child-component v-model.lazy="value" @input="onInputChange"></child-component>
    <button @click="confirmValue">确认</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      tempValue: ''
    }
  },
  methods: {
    onInputChange(value) {
      this.tempValue = value
    },
    confirmValue() {
      this.value = this.tempValue
    }
  }
}
</script>

子组件中：

<template>
  <input :value="value" @input="onInput">
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    onInput(event) {
      this.$emit('input', event.target.value)
    }
  }
}
</script>

这样，当你在子组件中输入值时，父组件的`value`并不会立即修改，而是在点击确认按钮时才会修改。