Why vue-property-decorator @Emit not working in Vue TypeScript file?

Question

I'm using Typescript and Vuejs, I have a child component
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>
    );
  }
}

And 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 console.log(n) there is no return, how do I get data from child component to parent component? Thanks everyone!

Answer 1

If you are using jsx/tsx format, the on will be the keyword of v:on/@

For the event name, there is a need to use either kebab-case or a strange camel kebab-case. Read this issue for details. This behaviour is not going to change as the contributors claim it may affect other events.

parent.component.ts

import Vue from 'vue';
import Component from 'vue-class-component';
import ChildComponent from './child.component';

@Component({
  components: {
    ChildComponent
  }
})
export default class ParentComponet extends Vue {

  changeNumber(n: number) {
    console.log(n);
  }

  render() {
    return (
      <div class="item-tab-hub">
        <ChildComponent on-change-number={this.changeNumber} />
        {/* or use camel kebab case
          <ChildComponent onChange-number={this.changeNumber} />
         */}

      </div>
    );
  }
}

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 {

  // ignore the `on-` and use kebab-case
  @Emit('change-number')
  changeNumber(n: number) {
      return n;
  }

  render() {
    return (
      <div> 
        <button onClick={() => this.changeNumber(10)}>Change Number</button>
      </div>
    );
  }
}