子组件修改父组件的值

要让子组件修改父组件的值，可以通过在父组件中定义一个方法，然后将该方法作为 props 传递给子组件，在子组件中调用该方法来修改父组件的值。

例如，在父组件中定义一个名为 handleValueChange 的方法：

<template>
  <div>
    <ChildComponent :value="value" :handleValueChange="handleValueChange" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      value: '',
    };
  },
  methods: {
    handleValueChange(newValue) {
      this.value = newValue;
    },
  },
};
</script>

然后在子组件中，通过调用 props 中传递过来的 handleValueChange 方法来修改父组件的值：

<template>
  <div>
    <input type="text" v-model="localValue" @input="handleChange" />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true,
    },
    handleValueChange: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      localValue: this.value,
    };
  },
  methods: {
    handleChange() {
      this.handleValueChange(this.localValue);
    },
  },
};
</script>

这样，当子组件中的 input 值发生变化时，就会调用 handleValueChange 方法来修改父组件的值。