vue3阻止子组件中的输入框的改变，父组件的对应回显字段同时改变

在Vue3中，如果你想阻止子组件中的输入框直接被用户更改，并确保只通过特定的方式（例如父组件提供的方法）来更新子组件的状态，你可以采取以下策略：

1. **props和methods**: 将输入框作为props传递给子组件，并提供一个`handleInputChange`这样的方法。在子组件中监听输入框的变化，然后通过这个方法通知父组件更新，而不是直接修改自身状态。

<!-- 子组件 -->
<template>
  <input v-model="localValue" @input="parentHandleInputChange" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
const localValue = ref('');
function parentHandleInputChange(e) {
  // 调用父组件提供的方法并传入新的值
  this.$emit('update:value', e.target.value);
}
onMounted(() => {
  // 初始化时从父组件获取初始值
  this.localValue.value = props.value;
});
</script>

2. **自定义事件**: 创建一个自定义事件，子组件发出事件通知父组件，由父组件负责更新。

<!-- 子组件 -->
<input :value="localValue" @change="handleChange" />

<script setup>
// ...
function handleChange() {
  emit('input-changed', localValue.value);
}
</script>

<!-- 父组件 -->
<ChildComponent @input-changed="handleInputChange" />
...
methods: {
  handleInputChange(value) {
    // 更新父组件的状态
    this.showValue = value;
  }
}

这样，即使用户试图直接更改输入框，也会通过父组件控制的途径进行更新，保持两者的一致性。