为什么 vue-属性-decorator @Emit 在 Vue TypeScript 文件中不起作用?
Why vue-property-decorator @Emit not working in Vue TypeScript file?
我正在使用 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)
中没有return,如何从子组件获取数据到父组件?
谢谢大家!
如果您使用 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>
);
}
}
我正在使用 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)
中没有return,如何从子组件获取数据到父组件?
谢谢大家!
如果您使用 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>
);
}
}