Estoy usando Typescript y Vuejs, tengo un componente secundario
hijo.componente.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> ); } }Y padre.componente.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> ); } } En console.log(n) no hay retorno, ¿cómo obtengo datos del componente secundario al componente principal? ¡Gracias a todos!
Si está utilizando el formato jsx/tsx , on será la palabra clave de v:on / @
Para el nombre del evento, es necesario usar kebab-case o un camel kebab-case extraño. Lea este número para más detalles. Este comportamiento no va a cambiar ya que los contribuyentes afirman que puede afectar otros eventos.
padre.componente.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> ); } }hijo.componente.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> ); } }