Nativescript Vue (移动应用程序)-如何将列表视图中的选定项目数据传回主应用程序？

<template>
  <Page>
    <ActionBar title="列表视图示例" />
    <StackLayout>
      <ListView for="item in items" @itemTap="onItemTap">
        <v-template>
          <Label :text="item.name" />
        </v-template>
      </ListView>
    </StackLayout>
  </Page>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: "项目1", id: 1 },
        { name: "项目2", id: 2 },
        { name: "项目3", id: 3 }
      ]
    };
  },
  methods: {
    onItemTap(event) {
      const selectedItem = event.item;
      // 将选定项目数据传递给主应用程序
      this.$emit("selectedItem", selectedItem);
    }
  }
};
</script>

<template>
  <Page>
    <ActionBar title="主应用程序" />
    <StackLayout>
      <Label :text="selectedItem.name" />
    </StackLayout>
  </Page>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: {}
    };
  },
  created() {
    // 监听选定项目数据
    this.$on("selectedItem", selectedItem => {
      this.selectedItem = selectedItem;
    });
  }
};
</script>