I am currently working with Typescript and Vuejs, where I have a child component called
child.component.tsx
import Vue from 'vue';
import Component from 'vue-class-component';
import { Emit } from 'vue-property-decorator';
@Component({})
export default class ChildComponet extends Vue {
@Emit('onChangeNumber')
changeNumber(n: number) {
return n;
}
render() {
return (
<div>
<button onClick={() => this.changeNumber(10)}>Change Number</button>
</div>
);
}
}
Now let's take a look at the parent.component.tsx
import Vue from 'vue';
import Component from 'vue-class-component';
import ChildComponent from './child.component';
@Component({
ChildComponent
})
export default class ParentComponet extends Vue {
changeNumber(n: number) {
console.log(n);
}
render() {
return (
<div class="item-tab-hub">
<ChildComponent on-change-number="changeNumber" />
</div>
);
}
}
In the console.log(n) statement, there is no return value. How can I retrieve data from the child component to the parent component?
Thanks for your help!