Nativescript Vue（移动应用程序） - 如何将所选项目数据从模态列表视图传递回主应用程序？

Question

同样，我对 Nativescript Vue 还是个新手。我已经努力通过 $navigateTo 使其工作但放弃并切换到 $showModal ......这就是我被困的地方。我看过几个用于移动应用程序的 Nativescript Vue 示例，但它只显示以一种方式将数据传递给模态。

我想做的是从这里传递选定的项目：

AirportList 截图如下

AirportList modal from Airportlist.vue

并将所选项目放在"Airport Name: "下（见下面的截图）

Custom page in App.vue

你可以在https://github.com/stahlie/first-ns-app

看到我的项目

这是我在代码中挣扎的地方

<CardView class="cardStyle" elevation="40" radius="10">
   <StackLayout class="cardContent"  > 
     <Label textWrap="true" text="Airport Name:"/>
     <TextField v-bind:text="SelectedAirportName" hint="Tap to Select" editable="false" @tap="onCustomItemTap"/>
    </StackLayout>
</CardView>

在脚本部分：

onCustomItemTap() {
  const newId = new Date().getTime();
  this.$showModal(AirportList, { props: { id : newId }, fullscreen: true });

},

在AirportList.vue区

onAirportNameTap(args) {
 // const selectedairport
    alert(args.index + " " + args.item.faaID + " " +  args.item.airportName);
},

我只是停留在这个问题上，无法弄清楚如何将 args.item.faaID 和 args.item.airportName 传递回该 TextField 区域中的 App.vue...您的输入将不胜感激。

Answer 1

对于父子：您可以在模态函数 onAirportNameTap() 中 this.$emit("event", { key: 'value' }) 并通过在自定义元素标签上绑定 :event="processEvent" 来在父级上监听它。

对于模态：https://nativescript-vue.org/en/docs/routing/manual-routing/#returning-data-from-the-modal（似乎是最好的方式）。

希望对您有所帮助。

Nativescript Vue（移动应用程序） - 如何将所选项目数据从模态列表视图传递回主应用程序？

Nativescript Vue (mobile app) - How to pass selected item data from listview in modal back to main app?

javascript

android

vue.js

nativescript

nativescript-vue