如何在Nuxt3合成Api中正确使用emit和props

Question

我想在Nuxtjs3中使用emit和props，但不确定，我在这里做错了什么。

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

这是在里面组件/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正在被填充。但我想要相同的数据被传递到var pickuppoint在TaxiSearchForm.

这是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
}

演示