vue-property-decorator使用手册

时间 2019-11-09

标签 vue property decorator 使用手册繁體版

原文原文链接

vue-property-decorator

安装

npm i -s vue-property-decorator复制代码

按照上一篇学习笔记搭建的项目，自动安装了 vue-property-decorator，不须要咱们手动安装html

用法

@Component(options:ComponentOptions = {})vue

@Component 装饰器能够接收一个对象做为参数，能够在对象中声明 components ，filters，directives等未提供装饰器的选项git

虽然也能够在@Component装饰器中声明computed，watch等，但并不推荐这么作，由于在访问this时，编译器会给出错误提示
github

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

@Component({
  filters: {
    toFixed: (num: number, fix: number = 2) => {
      return num.toFixed(fix)
    }
  }
})
export default class MyComponent extends Vue {
  public list: number[] = [0, 1, 2, 3, 4]
  get evenList() {
    return this.list.filter((item: number) => item % 2 === 0)
  }
}复制代码

@Prop(options: (PropOptions | Constructor[] | Constructor) = {})

@Prop装饰器接收一个参数，这个参数能够有三种写法：vue-cli

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) propA: string | undefined
  @Prop([String, Number]) propB!: string | number
  @Prop({
    type: String,
    default: 'abc'
  })
  propC!: string
}复制代码

使用js写法npm

export default {
  props: {
    propA: {
      type: Number
    },
    propB: {
      default: 'default value'
    },
    propC: {
      type: [String, Boolean]
    }
  }
}复制代码

注意：element-ui

属性的ts类型后面须要加上undefined类型；或者在属性名后面加上!，表示非null 和非undefined 的断言，不然编译器会给出错误提示
指定默认值必须使用上面例子中的写法，若是直接在属性名后面赋值，会重写这个属性，而且会报错

@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})

@PropSync装饰器与@prop用法相似，两者的区别在于：promise

@PropSync 装饰器接收两个参数
propName: string 表示父组件传递过来的属性名
options: Constructor | Constructor[] | PropOptions 与@Prop的第一个参数一致
@PropSync 会生成一个新的计算属性

import { Vue, Component, PropSync } from 'vue-property-decorator'
@Component
export default class MyComponent extends Vue {
  @PropSync('propA', { type: String, default: 'abc' }) syncedPropA!: string
}复制代码

使用js写法bash

export default {
  props: {
    propA: {
      type: String,
      default: 'abc'
    }
  },
  computed: {
    syncedPropA: {
      get() {
        return this.propA
      },
      set(value) {
        this.$emit('update:propA', value)
      }
    }
  }
}复制代码

@PropSync须要配合父组件的.sync修饰符使用ide

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

@Model装饰器容许咱们在一个组件上自定义v-model，接收两个参数：

event: string 事件名。
options: Constructor | Constructor[] | PropOptions 与@Prop的第一个参数一致。

import { Vue, Component, Model } from 'vue-property-decorator'
@Component
export default class MyInput extends Vue {
  @Model('change', { type: String, default: '123' }) value!: string
}复制代码

使用 js写法

export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: '123'
    }
  }
}复制代码

上面例子中指定的是change事件，因此咱们还须要在template中加上相应的事件：

<template>
  <input
    type="text"
    :value="value"
    @change="$emit('change', $event.target.value)"
  />
</template>复制代码

若是对自定义v-model不太理解，能够查看自定义事件

@Watch(path: string, options: WatchOptions = {})

@Watch 装饰器接收两个参数

path: string 被侦听的属性名
options?: WatchOptions={} options能够包含两个属性
immediate?:boolean 侦听开始以后是否当即调用该回调函数
deep?:boolean 被侦听的对象的属性被改变时，是否调用该回调函数

侦听开始，发生在 beforeCreate 勾子以后， created 勾子以前

import { Vue, Component, Watch } from 'vue-property-decorator'
@Component
export default class MyInput extends Vue {
  @Watch('msg')
  onMsgChanged(newValue: string, oldValue: string) {}

  @Watch('arr', { immediate: true, deep: true })
  onArrChanged1(newValue: number[], oldValue: number[]) {}

  @Watch('arr')
  onArrChanged2(newValue: number[], oldValue: number[]) {}
}复制代码

使用 js 写法

export default {
  watch: {
    msg: [
      {
        handler: 'onMsgChanged',
        immediate: false,
        deep: false
      }
    ],
    arr: [
      {
        handler: 'onArrChanged1',
        immediate: true,
        deep: true
      },
      {
        handler: 'onArrChanged2',
        immediate: false,
        deep: false
      }
    ]
  },
  methods: {
    onMsgVhanged(newValue, oldValue) {},
    onArrChange1(newValue, oldValue) {},
    onArrChange2(newValue, oldValue) {}
  }
}复制代码

@Emit(event?: string)

@Emit 装饰器接收一个可选参数，该参数是$Emit的第一个参数，充当事件名。若是没有提供这个参数，$Emit会将回调函数名的camelCase转为kebab-case，并将其做为事件名
@Emit会将回调函数的返回值做为第二个参数，若是返回值是一个Promise对象，$emit会在Promise对象被标记为resolved以后触发
@Emit的回调函数的参数，会放在其返回值以后，一块儿被$emit当作参数使用

import { Vue, Component, Emit } from 'vue-property-decorator'
@Component
export default class MyComponent extends Vue {
  count = 0
  @Emit()
  addToCount(n: number) {
    this.count += n
  }
  @Emit('reset')
  resetCount() {
    this.count = 0
  }
  @Emit()
  returnValue() {
    return 10
  }
  @Emit()
  onInputChange(e) {
    return e.target.value
  }
  @Emit()
  promise() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(20)
      }, 0)
    })
  }
}复制代码

使用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)
    },
    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)
      })
    }
  }
}复制代码

@Ref(refKey?: string)

@Ref 装饰器接收一个可选参数，用来指向元素或子组件的引用信息。若是没有提供这个参数，会使用装饰器后面的属性名充当参数

import { Vue, Component, Ref } from 'vue-property-decorator'
import { Form } from 'element-ui'
@Componentexport default class MyComponent extends Vue {
  @Ref() readonly loginForm!: Form
  @Ref('changePasswordForm') readonly passwordForm!: Form

  public handleLogin() {
    this.loginForm.validate(valide => {
      if (valide) {
        // login...
      } else {
        // error tips
      }
    })
  }
}复制代码

使用js写法

export default {
  computed: {
    loginForm: {
      cache: false,
      get() {
        return this.$refs.loginForm
      }
    },
    passwordForm: {
      cache: false,
      get() {
        return this.$refs.changePasswordForm
      }
    }
  }
}复制代码

@Provide/@Inject 和 @ProvideReactive/@InhectReactive

因为平时基本不用到provide/inject选项，暂时先放着，之后有时间再研究

参考：github.com/kaorun343/v…

上一篇：使用vue-cli3搭建Vue+TypeScript项目