如何将位于父组件中的状态绑定到Vue 3中可重用的selectInput组件?

我有一个名为SelectInput.vue的组件,它为选择输入提供了一组选项,还有一个父组件,在该组件中呈现该组件。父组件包含我希望绑定到SelectInput组件的用户状态,更具体地说,绑定到favoriteColor属性。我该怎么做?

主页.vue

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

    const user = ref({
        name: '',
        favoriteColor: '',
    })

    const selectOptions = ref(['red', 'green', 'blue', 'white', 'black'])

</script>

<template>
    <div class="user-input-container">
        <div class="user-input">
            <p>Favorite Color</p>
            <SelectInput :selectOptions="selectOptions" />
        </div>
    </div>
</template>

选择输入.vue

<script setup>
    defineProps({
        selectOptions: Array,
    })
</script>

<template>
    <select>
        <option disabled value="">Please select one</option>
        <option v-for="selectOption in selectOptions" v-bind:key="selectOption">{{ selectOption }}</option>
    </select>
</template>