详解vue-property-decorator使用手册

  • 时间:
  • 浏览:58

1,装置

npm i -s vue-property-decorator

2,用法

1,@Component(options:ComponentOptions = {})

@Component 装潢器能够领受1个工具做为参数,能够正在工具中声明 components ,filters,directives 等已供给装潢器的选项

固然也能够正在 @Component 装潢器中声明 computed,watch 等,但其实不保举那么做,由于正在拜候 this 时,编译器会给堕落误提醒

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)
 }
}

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

@Prop 装潢器领受1个参数,那个参数能够有3种写法:

  • 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 写法

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

留意:

  • 属性的ts范例前面需求减上 undefined 范例;或正在属性名前面减上!,暗示 非null 战 非undefined
  • 的断行,不然编译器会给堕落误提醒;
  • 指定默许值必需利用下面例子中的写法,若是间接正在属性名前面赋值,会重写那个属性,而且会报错。

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

  • @PropSync 装潢器取 @prop 用法相似,2者的区分正在于:
  • @PropSync 装潢器领受两个参数: 

propName: string 暗示女组件通报过去的属性名; 

options: Constructor | Constructor[] | PropOptions 取 @Prop 的第1个参数1致;

@PropSync 会死成1个新的计较属性。

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

同等于上面的 js 写法

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

留意: @PropSync 需求共同女组件的 .sync 润色符利用

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

@Model 装潢器许可我们正在1个组件上自界说 v-model ,领受两个参数:

event: string 事务名。

options: Constructor | Constructor[] | PropOptions 取 @Prop 的第1个参数1致。

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 中减上响应的事务:

对 自界说v-model 没有太了解的同窗,能够检察 自界说事务

5,@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) {}
 }
}

6,@Emit(event?: string)

  • @Emit 装潢器领受1个可选参数,该参数是 $Emit 的第1个参数,充任事务名。若是出有供给那个参数, $Emit 会将回调函数名的 camelCase 转为 kebab-case ,并将其做为事务名;
  • @Emit 会将回调函数的前往值做为第2个参数,若是前往值是1个 Promise 工具, $emit 会正在 Promise 工具被标识表记标帜为 resolved 以后触收;
  • @Emit 的回调函数的参数,会放正在其前往值以后,1起被 $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)
 })
 }
 }
}

7,@Ref(refKey?: string)

@Ref 装潢器领受1个可选参数,用去指背元素或子组件的援用疑息。若是出有供给那个参数,会利用装潢器前面的属性名充任参数

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选项,临时先放着,当前偶然间再研讨

参考: https://github.com/kaorun343/...

总结

以上所述是小编给各人引见的vue-property-decorator利用脚册,期望对各人有所帮忙,若是各人有任何疑问请给我留行,小编会实时复兴各人的。正在此也十分感激各人对剧本之家网站的撑持!
若是您以为本文对您有帮忙,欢送转载,烦请说明出处,开开!