javascript - Varför fungerar inte vue-property-decorator @Emit i en Vue TypeScript-fil?

Jag använder Typescript och Vuejs, jag har en barnkomponent
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>
    );
  }
}

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

I console.log(n) finns det ingen return, hur får jag data från en barnkomponent till en föräldrakomponent? Tack allihopa!

Svar #1

Om du använder jsx/tsx-format kommer on att vara nyckelordet för v:on/@

För evenemangsnamnet finns det behov av att använda antingen kebab-case eller en konstig camel kebab-case. Läs detta ärende för detaljer. Detta beteende kommer inte att ändras eftersom bidragsgivarna hävdar att det kan påverka andra evenemang.

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

Relaterade artiklar