javascript - ¿Por qué vue-property-decorator @Emit no funciona en un archivo Vue TypeScript?

Estoy usando Typescript y Vuejs, tengo un componente hijo
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>
    );
  }
}

Y 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>
    );
  }
}

En console.log(n) no hay retorno, ¿cómo obtengo datos del componente hijo al componente padre? ¡Gracias a todos!

Respuesta #1

Si estás usando el formato jsx/tsx, el on será la palabra clave de v:on/@

Para el nombre del evento, es necesario usar ya sea kebab-case o un extraño camel kebab-case. Lea este problema para más detalles. Este comportamiento no va a cambiar ya que los contribuyentes afirman que podría afectar a otros eventos.

padre.componente.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>
    );
  }
}