装饰器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[]) {}
}

装饰器vue-property-decorator

猜你喜欢