Component emit events not reaching parent #1104
Description
I'm trying to use RootLayout with a nativeView, but I can't seem to get the emit to fire.
I click the Details button then then Change button and see doChange in details, but not onChange in home.
Hopefully I'm just missing something obvious, but I can't figure out what.
https://stackblitz.com/edit/nativescript-vue-nativescript-vue-jkkom7uc
Home.vue
<script lang="ts" setup>
import { createNativeView } from 'nativescript-vue';
import { getRootLayout } from '@nativescript/core';
import Details from './Details.vue';
function showDetails() {
const node = createNativeView(Details, {
props: {
onChange(data) {
console.log('onChange in home');
},
},
});
node.mount();
getRootLayout().open(node.nativeView, {
animation: {
enterFrom: {
opacity: 0,
translateY: 50,
duration: 100,
},
exitTo: {
opacity: 0,
duration: 100,
},
},
});
}
</script>
<template>
<Frame>
<Page>
<RootLayout rows="*,auto,*">
<Button row="1" @tap="showDetails" text="Details" />
</RootLayout>
</Page>
</Frame>
</template>
<style scoped lang="scss"></style>
Details.vue
<script lang="ts" setup>
const emit = defineEmits(['change']);
function doChange() {
console.log('doChange in details');
emit('change');
}
</script>
<template>
<GridLayout rows="*,auto,*" backgroundColor="red" height="10%" width="100%">
<Button row="1" text="Change" @tap="doChange" />
</GridLayout>
</template>
<style scoped lang="scss"></style>