为什么 vue-property-decorator @Emit 在 Vue TypeScript 文件中不起作用？

Question

我正在使用 Typescript 和 Vuejs，我有一个子组件
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>
    );
  }
}

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

console.log(n)中没有返回，如何从子组件获取数据到父组件？ 谢谢大家！

Answer 1

如果您使用jsx/tsx 格式，on 将是v:on/@ 的关键字

对于事件名称，需要使用kebab-case 或奇怪的camel kebab-case。阅读this issue了解详情。这种行为不会改变，因为贡献者声称它可能会影响其他事件。

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