vue+typescript之vue-property-decorator使用

第一步,安装

npm i vue-property-decorator

前言：已经总结的属性有@Prop、@Watch、@Provide+@Inject、@Emit，结合实际开发持续更新中~

1.@Prop

// js写法
export default {
    props: {
        propertyA: string,
        propertyB: {
            type: Boolean,
            default: () {return false;}
        }
    }
}

\

// ts写法
import {Vue, Prop, Component} from 'vue-property-decorator';
 
@Component({
    name: 'TestProp',
    components: {}
})
 
export default class TestProp extends Vue{
    @Prop({
        default: false
    }) propertyA!: boolean;
    @Prop({
        default: ''
    }) propertyB!: string;
}

2.@Watch

// js写法
export default {
    watch: {
        propertyA: function(newV) { // 监听简单类型
            console.log('propertyA的新值为' + newV);
        },
        propertyB: { // 对象或数组深度监听
            handler(newV) {
                console.log('propertyB的新值为' + newV);
            }
            deep: true
        }
    }
}

\

// ts写法
import {Vue, Component, Watch} from 'vue-property-decorator';
 
@Component({
    name: 'TestWatch',
    components: {}
})
 
export default class TestWatch extends Vue{
    @Watch('propertyA')
    propertyAChange(newV: string) {
        console.log('propertyA新值为' + newV);
    }
}

3.@Provide+@Inject组合使用

// js写法
// 组件A
export default {
    provide() {
        return {
            reload: this.reload;
        }
    }
    methods: {
        reload() {
            // 刷新页面的代码。。。
        }
    }
}
// 组件BCDEFG都可以使用
export default {
    inject: ['reload']
    created() {
        this.reload(); // 这个时候会调用组件A的reload方法
    }
}

\

// ts写法
// 组件A
import { Vue, Component, Provide } from 'vue-property-decorator';
@Component({
    name: 'ComponentA',
    components: {}
})
export default class ComponentA extends Vue {
    @Provide('reload')
    reload = this.reload;
    reload(): void {
        // 刷新页面的代码。。。
    }
}
// 组件BCDE
import { Vue, Component, Inject } from 'vue-property-decorator';
@Component({
    name: 'ComponentB',
    components: {}
})
export default class ComponentB extends Vue {
    @Inject('reload')
    created() {
        this.reload(); // 此时会调用组件A的reload方法
    }
}

4.@Emit

// js写法
// 父组件
<componentA @change='handelChange'></componentA>
 
export default {
    handelChange() {
        console.log('子组件改变了');
    }
}
 
// 子组件 componentA
export default {
    mounted() {
        this.$emit('change');
    }
}

\

// ts写法
// 父组件
<componentA @change='handelChange'></componentA>
 
import { Vue, Component } from 'vue-property-decorator';
@Component({
    name: 'ParentCom',
    components: {}
})
export default class ParentCom extends Vue {
    handelChange(): void {
        console.log('子组件改变了');
    }
}
 
// 子组件 componentA
import { Vue, Component, Emit } from 'vue-property-decorator';
@Component({
    name: 'ComponentB',
    components: {}
})
export default class ComponentB extends Vue {
    @Emit('change')
    doChange() {
        return '';
    }
    created() {
        this.doChange();
    }
}