wonderful-panda / vue-tsx-support

TSX (JSX for TypeScript) support library for Vue
MIT License
578 stars 40 forks source link

emitOn toLowerCase eventName #86

Closed NpDen4ik closed 3 years ago

NpDen4ik commented 3 years ago
exports.emit = emit;
function emitOn(vm, name) {
    var args = [];
    for (var _i = 2; _i < arguments.length; _i++) {
        args[_i - 2] = arguments[_i];
    }
    vm.$emit.apply(vm, __spreadArrays([name.replace(/^on[A-Z]/, function (v) { return v[2].toLowerCase(); })], args));
}

Can you delete 'toLowerCase', beacause it's problem when you use tsx component in .vue. I created interface:

interface ISelectEvents{
 onSelect: any & {id:string|number}
}
...
export default class MySelect extends tsx.Component<{},ISelectEvents>{
...
selectHandler(item){
 tsx.emitOn(this,'onSelect', item)
}
...
}

And when i use my tsx component in .vue:

<template>
 <MySelect  @onSelect="console.log($event)"
</template>

It doesn't work because emitted 'onselect', it's problem pls resolve it

NpDen4ik commented 3 years ago

Ok, sorry, I understood the general principle of work and how to manage it here .

In current example:

<template>
 <MySelect  @select="console.log($event)"
</template>
NpDen4ik commented 3 years ago
exports.emit = emit;
function emitOn(vm, name) {
    var args = [];
    for (var _i = 2; _i < arguments.length; _i++) {
        args[_i - 2] = arguments[_i];
    }
    vm.$emit.apply(vm, __spreadArrays([name.replace(/^on[A-Z]/, function (v) { return v[2].toLowerCase(); })], args));
}

Can you delete 'toLowerCase', beacause it's problem when you use tsx component in .vue. I created interface:

interface ISelectEvents{
 onSelect: any & {id:string|number}
}
...
export default class MySelect extends tsx.Component<{},ISelectEvents>{
...
selectHandler(item){
 tsx.emitOn(this,'onSelect', item)
}
...
}

And when i use my tsx component in .vue:

<template>
 <MySelect  @onSelect="console.log($event)"
</template>

It doesn't work because emitted 'onselect', it's problem pls resolve it

and here emitted => 'select'