我正在使用 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)
中没有返回,如何从子组件获取数据到父组件?
谢谢大家!
最佳答案
如果您使用 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>
);
}
}
关于javascript - 为什么 vue-property-decorator @Emit 在 Vue TypeScript 文件中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68690518/