Vue之vue-property-decorator

2020-05-19

使用

1、安装npm install –save vue-property-decorator

@Component (from vue-class-component)
@Prop
@Model
@Watch
@Emit
@Inject
@Provide
Mixins (the helper function named mixins defined at vue-class-component)

2、@Component

import { componentA,componentB } from '@/components';

export default {
    components: {
        componentA,
        componentB,
    },
    directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
                el.focus()
            }
        }
    }
}

ts写法

import { Component, Vue } from 'vue-property-decorator';
import { componentA,componentB } from '@/components';

@Component({
    components: {
        componentA,
        componentB,
    },
    directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
                el.focus()
            }
        }
    }
})
export default class YourComponent extends Vue{
   
}

3、@Prop 父子组件之间值的传递

export default {
    props: {
        propA: String, // propA: Number
        propB: [String, Number],
        propC: 
            type: Array,
            default: () => {
                return ['a','b']
            },
            required: true,
            validator: (value) => {
                return [
                    'a',
                    'b'
                ].indexOf(value) !== -1
            }
        }
    }
}

ts写法


import { Component, Vue, Prop} from vue-property-decorator;

@Component
export default class YourComponent extends Vue {
    @Prop(String)
    propA: string;
    
    @Prop([String, Number])
    propB: string|number;
    
    @Prop({
        type: String, // type: [String , Number]
        default: 'default value', // 一般为String或Number
        //如果是对象或数组的话。默认值从一个工厂函数中返回
        // defatult: () => {
        //     return ['a','b']
        // }
        required: true,
        validator: (value) => {
            return [
            'InProcess',
            'Settled'
            ].indexOf(value) !== -1
        }
    })
    propC: string;    
}

4、@Model (组件之间，checkbox)

父组件中使用 v-model=”checked” 子组件

1	<input type="checkbox" :checked="checked" @change="change">

js写法（2.2.0+ 新增）

export default {
    model: {
        prop: 'checked',
        event: 'change'
    },
    props: {
        checked: {
            type: Boolean
        }
    },
    methods: {
        change(e) {
            this.$emit('change', e.target.checked)
        }
    }
}

ts写法

import { Vue, Component, Model, Emit } from 'vue-property-decorator';

@Component
export default class YourComponent extends Vue{

    @Model('change', {
        type: Boolean
    })
    checked!:boolean;
    
    @Emit('change')
    change(e: MouseEvent) {

    }
    
}

5、@Watch

export default {
    watch: {
        'person': {
            handler: 'onPersonChanged',
            immediate: true,
            deep: true
        }
    },
    methods: {
        onPersonChanged(val, oldVal) { }
    }
}

ts写法

import { Vue, Component, Watch } from 'vue-property-decorator';

@Component
export default class YourComponent extends Vue{
    @Watch('person', { immediate: true, deep: true })
    onPersonChanged(val: Person, oldVal: Person) { }
}

6、@Emit

由@Emit $emit 定义的函数发出它们的返回值，后跟它们的原始参数。如果返回值是promise，则在发出之前将其解析。

如果事件的名称未通过事件参数提供，则使用函数名称。在这种情况下，camelCase名称将转换为kebab-case。

js写法

export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {
        addToCount(n) {
            this.count += n
            this.$emit('add-to-count', n)
        },
        resetCount() {
            this.count = 0
            this.$emit('reset')
        },
        returnValue() {
            this.$emit('return-value', 10)
        },
        promise() {
            const promise = new Promise(resolve => {
                setTimeout(() => {
                    resolve(20)
                }, 0)
            })

            promise.then(value => {
                this.$emit('promise', value)
            })
        }
    }
}

import { Vue, Component, Emit } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
    count = 0

    @Emit()
    addToCount(n: number) {
        this.count += n
    }

    @Emit('reset')
    resetCount() {
        this.count = 0
    }

    @Emit()
    returnValue() {
        return 10
    }

    @Emit()
    promise() {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve(20)
            }, 0)
        })
    }
}

参考：
https://juejin.im/post/5c173a84f265da610e7ffe44