在Vue中实现父组件控制子组件的值的两种方法

<template>
  <div>
    <child-component :value.sync="parentValue"></child-component>
  </div>
</template>

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

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

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

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  computed: {
    internalValue: {
      get() {
        return this.value;
      },
      set(newValue) {
        this.$emit('update:value', newValue);
      }
    }
  }
}
</script>

<template>
  <div>
    <child-component :value="parentValue" @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

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

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

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

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      internalValue: this.value
    };
  },
  methods: {
    emitCustomEvent() {
      this.$emit('custom-event', this.internalValue);
    }
  }
}
</script>