dyangjs-property-decorator v0.1.3

Vue dyangjs Property Decorator

License

MIT License

Install

npm i -D dyangjs-property-decorator

Usage

There are several decorators:

• @Prop
• @Emit
• @Watch
• @Provide
• @Inject
• @Prop
• @Component

There are several class:

• VueComponent

There are several implements:

• ComponentExtend

See also

import VueComponent,{ ComponentExtend, Component, Props } from 'dyangjs-property-decorator';
import ChildrenComponentName from 'xx/xxx';
@Component({
    name:"YourComponentName",
    components:{ ChildrenComponentName }
})
class YourComponent extends VueComponent implements ComponentExtend{
    /** Props */
    @Props({
        default:"",
        type:String
    })
    text!:string

    /** Computed */
    get computedData(){
        return {
            testValue:1
        }
    }

    /** Methods */
    ClickMethod(){
        console.log('Click Method!!!');
    }

    /** 触发input事件 */
    @Emit('input')
    EmitInput(value:boolean){
        return value;
    }
    /** 触发change事件 */
    @Emit('change')
    EmitChange(value:any){
        return value;
    }

    @Watch("value")
    changeValue(value,valu1){
        console.log(value,valu1)
    }

    @Provide()
    test1(){
        return {
            'Form':this.value
        }
    }

    /** Vue Dates*/
    params:string = 'Test Text';

    @Inject({
        from:"Form",
        default(){
            return undefined
        }
    })
    Form:any

    render(h){
        return {
            <div class="example">
                h("ChildrenComponentName",{},this.$slots.default)
                <button onClick={this.ClickMethod}>Click Me!</button>
            </div>
        }
    }
}
export default YourComponent;

is equivalent to

export default {
    props:{
        text:{
            default:"",
            type:String
        }
    },
    computed:{
        computedData(){
            return {
                testValue:1
            }
        }
    },
    watch:{
        value:function changeValue(value,valu1){
            console.log(value,valu1)
        }
    },
    provide(){
        return {
            'Form':this.value
        }
    },
    inject:{
        from:"Form",
        default(){
            return undefined
        }
    },
    methdos:{
        ClickMethod(){
            console.log('Click Method!!!');
        }
    }
}