vue 子组件如何使用input修改父组件的值

在Vue中，子组件可以通过使用`props`属性接收父组件传递的值，并且可以通过`$emit`方法触发自定义事件来修改父组件的值。

首先，在父组件中，你需要将要修改的值作为一个属性传递给子组件。例如，你可以在父组件中定义一个名为`value`的属性，并将它传递给子组件：

<template>
  <div>
    <child-component :value="value" @input="updateValue"></child-component>
    <p>父组件的值：{{ value }}</p>
  </div>
</template>

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

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

然后，在子组件中，你可以通过定义一个名为`value`的`props`属性接收父组件传递的值，并在需要修改时触发`input`事件来通知父组件更新值。例如，你可以在子组件的模板中使用`v-model`绑定一个输入框，并在输入框的`input`事件中触发`input`事件：

<template>
  <div>
    <input v-model="internalValue" @input="updateParentValue">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      internalValue: this.value
    };
  },
  methods: {
    updateParentValue() {
      this.$emit('input', this.internalValue);
    }
  }
};
</script>

这样，当子组件中的输入框的值发生变化时，会触发`input`事件，并将新的值通过`$emit`方法传递给父组件的`updateValue`方法，从而实现了子组件修改父组件的值。