Nuxt UI中子组件UInput的值如何传递到父组件的<script setup>中？

要在父组件中获取子组件内UInput的值及其变化，通过Vue的双向绑定机制即可实现，具体步骤如下：

1. 改造子组件，支持双向绑定 #

修改子组件代码，定义modelValue属性并触发update:modelValue事件（Vue 3双向绑定的标准实现方式）：

<template>
  <div>
    <label for="phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{
      $t('nav.cellphone')
    }}</label>
    <div class="relative mb-6" dir="ltr">
      <UInput
        :model-value="modelValue"
        @update:model-value="$emit('update:modelValue', $event)"
        class="text-left"
        :placeholder="$t('registration.cellphone')"
        icon="i-heroicons-phone"
        type="phone"
        name="phone"
      />
    </div>
  </div>
</template>

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

如果子组件需要保留内部的phone变量，也可以用计算属性封装：

<template>
  <div>
    <label for="phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{
      $t('nav.cellphone')
    }}</label>
    <div class="relative mb-6" dir="ltr">
      <UInput
        v-model="phone"
        class="text-left"
        :placeholder="$t('registration.cellphone')"
        icon="i-heroicons-phone"
        type="phone"
        name="phone"
      />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const phone = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>

2. 父组件中绑定并监听值 #

在父组件的<script setup>中定义变量，通过v-model绑定到子组件，即可实时获取输入值和变化：

<template>
  <LazyModalsLoginsignupElementsPhone v-model="parentPhone" />
</template>

<script setup>
import { ref, watch } from 'vue'

// 存储子组件输入的手机号
const parentPhone = ref('')

// 监听手机号的变化
watch(parentPhone, (newValue, oldValue) => {
  console.log('手机号更新：', newValue, oldValue)
  // 这里可以添加值变化后的业务逻辑
})
</script>

关键说明 #

• 子组件通过defineProps接收父组件的modelValue，通过defineEmits触发更新事件，这是Vue 3实现双向绑定的标准范式。
• 父组件使用v-model绑定变量后，该变量会与子组件UInput的值实时同步，配合watch可以监听值的每一次变化并处理逻辑。

内容的提问来源于stack exchange，提问作者Hadi Majidi