我正在尝试将我的组件迁移到Vue 3中。我发现在如何设置V模型上很混乱，尤其是在嵌套组件上。最初，该复选框不应该被选中，因为我正在从API中检索一个值。我应该在哪里初始设置这个嵌套组件的v-model？

CheckboxFieldComponent.vue

<template>
    <div v-show="isVisible">
      <FormCheckbox
        v-model="booleanFromStoreConvertedToArray"
        :input-value="field.model.itemId"
        :title="title"
        :id="field.valueField.id"
        :class="field.model.cssClass"
        :name="field.valueField.name"
        :checked="true"
        :required="required"
        :disabled="!isEnabled"
        @input="
          onInput(value);
          $emit('change');
        "
        @focus="field.tracker.onFocusField(field, value)"
        @blur="field.tracker.onBlurField(field, value, errors.value)"
      />
    </div>
</template>

<script>
export default {
  extends: BaseField,
  computed: {
    booleanFromStoreConvertedToArray: {
      get() {
        const isSelected = this.value;
        if (isSelected) {
          return [this.field.model.itemId];
        }
        return [];
      },
      set(value) {
        this.value = value.length > 0;
      },
    },
  },
};
</script>

FormCheckbox.vue
<template>
  <FormCheckboxBase
    :checked="shouldBeChecked"
    type="checkbox"
    :class="$style.check"
    :input-value="inputValue"
    :title="title"
    :id="id"
    :name="name"
    :required="required"
    v-bind="$attrs"
    @updateInput="updateInput"
  />
</template>

<script>
export default {
  components: {
    FormCheckboxBase,
  },
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    inputValue: {
      // this is the value that will be assigned to the html element's value-property
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    id: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      default: '',
    },
    required: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    shouldBeChecked() {
      if (!this.value) {
        return false;
      }
      return this.value.includes(this.inputValue);
    },
  },
  methods: {
    updateInput(event) {
      const { checked, value } = event.target;
      const newValue = [...this.value];
      let checkLabel;

      if (checked) {
        checkLabel = 'on';
        newValue.push(value);
      } else {
        checkLabel = 'off';
        newValue.splice(newValue.indexOf(value), 1);
      }

      // this.$emit('input', newValue); <--- This is from Vue 2 which was working
    },
  },
};
</script>

FormCheckboxBase.vue

<template>
  <div :class="$style['form-item']">
    <input
      :id="id"
      :value="inputValue"
      @change="updateInput"
      :type="type"
      v-bind="$attrs"
      class="input"
      :class="$style.input"
    />
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'checkbox',
    },
    inputValue: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    id: {
      type: String,
      required: true,
    },
    required: {
      type: Boolean,
      default: false,
    },
    checkboxList: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    updateInput(event) {
      // this.$emit('updateInput', event); <--- This is From Vue2 Event Emitter
    },
  },
};
</script>

我只是使用这个Basefield作为扩展组件，这样我就可以触发onInput事件，当我触发check / input字段时，它会触发两次，并且不会更改值

BaseField.vue

onInput(value) {
   this.value = value;
   // validate
   this.validate();
},