装饰器vue-property-decorator

接触到了新的vue项目，使用vue+ts+vue-property-decotator来进行项目的简化，一时间语法没有看懂，所以花时间学习这个装饰器的包。

1.装饰器 @Component(options:Component = {})

默认接受一个对象作为参数，在这个对象中声明components、 filters、 directives等未提供装饰符的选项，也可以声明computed、watch等

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

import Gap from './Gap.vue'

@Component({

    components: {

        Gap,

    }

})

export default class CorrectQuestionResult extends Vue{

    get trueAnswerText () {

        const trueAnswer = this.trueAnswer.ecAnswers![0]

        return this.formatAnswerDesc(trueAnswer.operation!, trueAnswer.source!, trueAnswer.target!)

    }

}

在@component中声明了引入的组件，组件的写法也发生了改变，export default class '组件name' extends Vue, 在vue中data、computed的形式也发生改变

<script lang="ts">

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

    @Component({})

    export default class "组件名" extends Vue{

        ValA: string = "hello world";

        ValB: number = 1;

        get val() {

             return this.ValB + 1;

            }

    }

</script>

等同于

<script>

    export default {

       data() {

           return {

              ValA: string = "hello world";

              ValB: number = 1;

         }

       },

      computed: {

          val() {

              return this.ValB + 1;

           }

      }

    }

</script>

2.@Prop(options: (PropOptions | construct[] | construct))

　@Prop接受一个参数，可以有三种写法

　　　　Constructor，例如String，Number, Boolean等，指定prop的类型

　　　　Constructor[],指定prop的类型

　　　　PropOptions,可以使用以下选项：type，default，required，validator

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

@Componentexport default class MyComponent extends Vue {

  @Prop(String) public propA: string | undefined

  @Prop([String, Number]) public propB!: string | number

  @Prop({

    type: String,

    default: 'abc'

  })

  public propC!: string

}

warning:

　　　　属性的ts类型后面需要加上undefined类型；或者在属性名后面加上!，表示非null 和 非undefined

的断言，否则编译器会给出错误提示

　　　　指定默认值必须使用上面例子中的写法，如果直接在属性名后面赋值，会重写这个属性，并且会报错。

3.@Model(event?: string, options:(PropOptions | Contructor[] | Constructor) = {})

　　装饰自定义Model，自定义v-model，接收两个参数：1.event 2. prop; 和vue官方的参数一致，只是装饰器写法稍有不同。

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

@Component

export default class MyInput extends Vue {

  @Model('change', { type: String, default: '123' }) public value!: string

}

需要在父组件中配合

<input

    type="text"

    v-model="value"  // 真的

    :value="value" // 假的

    @change="$emit('change', $event.target.value)" // 假的

  />

4.@Watch (path: string, options:watchOptions = {}), 接收两个参数 path: 被监听的属性名，监听的条件：{immediate: boolean , 监听之后是否立即调用该毁掉函数； deep:boolean，被监听的对象属性改变，是否调用该函数}

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

@Component

export default class MyInput extends Vue {

  @Watch('msg')

  public onMsgChanged(newValue: string, oldValue: string) {}

  @Watch('arr', { immediate: true, deep: true })

  public onArrChanged1(newValue: number[], oldValue: number[]) {}

  @Watch('arr')

  public onArrChanged2(newValue: number[], oldValue: number[]) {}

}

5.@Emit装饰器

　　　　1.接收一个可选参数，该参数是$emit的第一个参数(事件名)，如果没有提供这个参数，$emit会将回调函数的cameCase转为kebab-case，作为事件名

　　　　2.会将回调函数的返回值作为第二个参数，如果返回值是一个promise对象，$emit会在promise状态改为resolve之后触发。

　　　　3.emit回调函数的参数，将会放在其返回值之后，一起被$emit当作参数使用。

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

@Component

export default class MyComponent extends Vue {

  count = 0

  @Emit()

  public addToCount(n: number) {

    this.count += n

  }

  @Emit('reset')

  public resetCount() {

    this.count = 0

  }

  @Emit()

  public returnValue() {

    return 10

  }

  @Emit()

  public onInputChange(e) {

    return e.target.value

  }

  @Emit()

  public promise() {

    return new Promise(resolve => {

      setTimeout(() => {

        resolve(20)

      }, 0)

    })

  }

}

等同于

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)

    },

    onInputChange(e) {

      this.$emit('on-input-change', e.target.value, e)

    },

    promise() {

      const promise = new Promise(resolve => {

        setTimeout(() => {

          resolve(20)

        }, 0)

      })

      promise.then(value => {

        this.$emit('promise', value)

      })

    }

  }

}

6.Mixins在vue中有两种配合typescript的混合方法，一种需要定义接口、一种不需要定义vue/type/vue模块

//定义要混合的类 mixins.ts

import Vue from 'vue';

import  Component  from 'vue-class-component';

@Component  // 一定要用Component修饰

export default class myMixins extends Vue {

    value: string = "Hello"

}

// 引入

import  Component  {mixins}  from 'vue-class-component';

import myMixins from 'mixins.ts';

@Component

export class myComponent extends mixins(myMixins) {

                          // 直接extends myMinxins 也可以正常运行

      created(){

          console.log(this.value) // => Hello

    }

}

第二种方式，需要定义vue/type/vue模块，1.改造混入的ts文件定义 vue/type/vue接口

// mixins.ts

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

declare module 'vue/types/vue' {

    interface Vue {

        value: string;

    }

}

@Component

export default class myMixins extends Vue {

    value: string = 'Hello'

}

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

import myMixins from '@static/js/mixins';

@Component({

    mixins: [myMixins]

})

export default class myComponent extends Vue{

    created(){

        console.log(this.value) // => Hello

    }

}

两种方法的不同是定义vue/type/vue模块，在混入的时候就要继承该mixins，，如果是定了该模块，直接在@Component中混入即可

巴特西

装饰器vue-property-decorator

最新文章

热门文章