为什么Vue -属性装饰器@Emit不能在Vue TypeScript文件中工作？

Question

我使用的是类型记录和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。详细信息请阅读本期。这种行为不会改变，因为贡献者声称它可能会影响其他事件。

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