如何在Vue中使用受控组件在父组件对象中设置值

<template>
  <div>
    <ChildComponent v-model="value" />
  </div>
</template>

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

export default {
  data() {
    return {
      value: ''
    };
  },
  components: {
    ChildComponent
  }
};
</script>

<template>
  <div>
    <input type="text" v-model="internalValue" @input="updateValue" />
  </div>
</template>

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