我有一个关于从子组件向祖组件传递值的问题。所以我有这个简单的TextInput组件：

TextInput.vue
<script setup>
import { ref } from 'vue';

defineProps({
    modelValue: {
        type: String,
        required: false,
    },
});

defineEmits(['update:modelValue']);

const input = ref(null);
});
</script>

<template>
    <input
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
        ref="input"
    />
</template>

现在我在父组件“Company.vue”中使用这个组件：

Company.vue
<script setup>
import TextInput from "@/Components/TextInput.vue";

defineProps({
  user: {
      type: Object
  },
  form: {
      type: Object,
      required: true
  },
})
</script>

<template>
    <div>
           <TextInput
                    id="company"
                    type="text"
                    class="mt-1 block w-full"
                    v-model="form.company"
                    required
                    autofocus
                    autocomplete="organization"
            />
        </div>
    </div>
</template>

现在，Company.vue用于“Setup.vue”。Setup.vue使用了InteriaJS并做到了这一点：

<script setup>
import { ref } from "vue";
import { useForm } from "@inertiajs/vue3";
import Company from "@/Pages/Profile/Setup/Partials/Company.vue";

const props = defineProps({
    user: {
        type: Object,
        required: true,
    },
})

const form = useForm({
    company: null,
});

</script>

<template>
          <Company
                  :user="props.user"
                  v-model:form="form"
          >
</template>

到目前为止，这是有效的，但我问自己这是否是正确的方法。所以我用v-model传递form两次。第一次我传递的是整个form，第二次我只传递form.company作为v-model到TextInput。在Company.vue中，我不能使用:value，因为TextInput的prop是modelValue-所以它需要v-model。