如何在Nuxt3组合应用中正确使用发射和道具

Question

我想在Nuxtjs3中使用发射和道具，但不确定我在这里做错了什么。

在我的项目中，我需要在很多页面上找到机场数据，所以我创建了一个机场搜索组件。

这是内部组件/AirportSearch.vue

<template>
      <AutoComplete
        class="ttc-w-full ttc-h-12"
        v-model="AirportData"
        :suggestions="airports"
        @complete="getairports($event)"
        field="name"
        placeholder="Search Pickup Location"
        forceSelection
        @item-select="Update"
      >
        <template #item="slotProps">
          <div
            style="display: flex; justify-content: space-between"
            class="ttc-font-bold ttc-text-md"
          >
            {{ slotProps.item.name }}
            <span class="ttc-font-normal ttc-text-xs">
              {{ slotProps.item.code }}
            </span>
          </div>
        </template>
      </AutoComplete>
</template>

<script setup>
import { ref } from "vue";
const { apiUrl } = useRuntimeConfig();
const airports = ref([]);
const emit = defineEmits(["submit"])

const props = defineProps(['AirportData']);

const getairports = useDebounce(async (event) => {
  const { data } = await useFetch(`${apiUrl}/airports/find`, {
    method: "post",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      aptsearchkey: event.query,
    }),
  });
  airports.value = data.value;
}, 500);


function Update(event) {
    emit("submit", props.AirportData);
}

</script>

这是组件文件夹TaxiSearchForm.vue中的另一个组件

<template>
 <div>
   <AirportSearch 
      :AirportData="pickuppoint"
      @submit="handleUpdate"
   />
  </div>
</template>
<script setup>
 import {ref} from 'vue'
        
 const airportTransferData = useCookie("airportTransferData", {
   maxAge: 60 * 60 * 24 * 7,
 });
        
 let pickuppoint = ref();
        
 function handleUpdate(pickuppoint) {
         pickuppoint.value = pickuppoint;
 };
    
onMounted(() => {
   if (airportTransferData.value) {
      pickuppoint.value = airportTransferData.value.pickuppoint;
    }
 });
        
</script>

我无法将数据从AirportSearch组件传递到TaxiSearchForm。

当我在AirportSearch中选择下拉列表时，我看到AirportData Prop正在被填充。但我希望将相同的数据传递给TaxiSearchForm中的var拾取点。

这是AirportSearch.vue中api的响应示例。

const airports = [
    {
        "aptid": "1439",
        "code": "DXB",
        "name": "Dubai Intl Airport",
        "cityCode": "DXB",
        "cityName": "Dubai",
        "countryName": "UNITED ARAB EMIRATES",
        "countryCode": "AE",
        "continent_id": null,
        "timezone": "4",
        "lat": "25.252778",
        "lon": "55.364444",
        "city": "true",
        "id": "6135ee7e91649f157edff402"
    },
    {
        "aptid": "3101",
        "code": "XNB",
        "name": "Dubai Bus Station Airport",
        "cityCode": "DXB",
        "cityName": "Dubai",
        "countryName": "UNITED ARAB EMIRATES",
        "countryCode": "AE",
        "continent_id": null,
        "timezone": "3",
        "lat": "0",
        "lon": "0",
        "city": "false",
        "id": "6135ee7e91649f157edffa80"
    },
    {
        "aptid": "3475",
        "code": "DWC",
        "name": "Al Maktoum International Airport",
        "cityCode": "DXB",
        "cityName": "Dubai",
        "countryName": "UNITED ARAB EMIRATES",
        "countryCode": "AE",
        "continent_id": null,
        "timezone": "4",
        "lat": "24.898504",
        "lon": "55.143231",
        "city": "false",
        "id": "6135ee7e91649f157edffbf6"
    },
    {
        "aptid": "7609",
        "code": "SHJ",
        "name": "Sharjah Airport",
        "cityCode": "DXB",
        "cityName": "Dubai",
        "countryName": "UNITED ARAB EMIRATES",
        "countryCode": "AE",
        "continent_id": null,
        "timezone": "4",
        "lat": "25.328575",
        "lon": "55.51715",
        "city": "false",
        "id": "6135ee7f91649f157ee00c1c"
    }
]

Answer 1

问题是handleUpdate()参数(pickuppoint)阴影外部ref的同名，因此函数错误地修改它的参数而不是ref。

let pickuppoint = ref()

function handleUpdate(pickuppoint) {
   //  this is the function argument, not the outer ref
  pickuppoint.value = pickuppoint
}

解决办法是让名字与众不同。例如，重命名函数参数：

let pickuppoint = ref()

function handleUpdate(newPickuppoint) {
  pickuppoint.value = newPickuppoint
}

演示