将值从子级传递给父级

Question

我在 Nuxt UI 中有一个组件。

<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>

家长是：

<LazyModalsLoginsignupElementsPhone />

问题是我想在父级中获得 UInput 的当前值和更改值

<script setup>

Answer 1

您需要将

phone

制作为

LazyModalsLoginsignupElementPhone

的道具

LazyModalsLoginsignupElementsPhone.vue

<script setup>
const props = defineProps({phone: {type: String, required: true});
</script>

<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>

ParentElement.vue

<script setup>
const phone = ref('555-555-5555');
</script>

<template>
<LazyModalsLoginsignupElementsPhone :phone="phone" />
</template>